Home » Javascript » Props Pada ReactJS : Penjelasan dan Contoh Syntax nya

Props Pada ReactJS : Penjelasan dan Contoh Syntax nya

by syifaul fuadi
by syifaul fuadi

Props adalah “model” data yang memiliki fungsi ganda yaitu selain untuk menyimpan data, Props juga berfungsi untuk “melempar data” antar components view jika ada perubahan data di state. Properti diteruskan ke komponen melalui atribut HTML.

React Props

React Props seperti argumen fungsi dalam JavaScript dan atribut dalam HTML. Untuk mengirim props ke dalam sebuah komponen, gunakan sintaks yang sama dengan atribut HTML:

Contoh Syntax
Tambahkan atribut “merek” ke elemen Mobil:

const myelement = <Car brand="Ford" />;

Komponen menerima argumen sebagai propsobjek:

Contoh
Gunakan atribut merek di komponen:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}!</h2>
  }
}

const myelement = <Car brand="Ford" />;

ReactDOM.render(myelement, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

PASS DATA

Alat peraga juga merupakan cara Anda asah data dari satu komponen ke komponen lainnya, sebagai parameter.

Contoh
Kirim properti “brand” dari komponen Garasi ke komponen Mobil:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car brand="Ford" />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

Jika Anda memiliki variabel untuk dikirim, dan bukan string seperti di atas, kal;ian cukup memasukkan nama variabel di dalam tanda kurung kurawal:

Contoh
Buat variabel bernama “carname” dan kirimkan ke komponen Mobil:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    const carname = "Ford";
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car brand={carname} />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Atau jika itu sebuah objek:

Contoh
Buat sebuah objek bernama “carinfo” dan kirimkan ke komponen Car:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand.model}!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    const carinfo = {name: "Ford", model: "Mustang"};
    return (
      <div>
      <h1>Who lives in my garage?</h1>
      <Car brand={carinfo} />
      </div>
    );
  }
}
ReactDOM.render(<Garage />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

Properti di Constructor

Jika komponen kalian memiliki fungsi konstruktor, props harus selalu diteruskan ke konstruktor dan juga ke React.Component melalui super()metode.

Contoh Syntax :

class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>I am a {this.props.model}!</h2>;
  }
}

ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));

You may also like