Props React JS

Props adalah argumen yang diteruskan ke komponen Rect JS.

Props diteruskan ke komponen melalui atribut HTML.

Fungsi Props React JS dalam argumen seperti dalam JavaScript dan atribut dalam HTML.

Untuk mengirim Props ke dalam komponen, gunakan sintaks yang sama dengan atribut

HTML:

Contoh

Tambahkan atribut “brand” ke elemen Car:

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

Komponen menerima argumen sebagai objek props:

Contoh

Gunakan atribut brand dalam komponen:

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

Melalui Data

Props juga dapat dengan cara mengirimkan data dari satu komponen ke komponen lainnya, sebagai parameter.

Contoh

Kirim properti “brand” dari komponen Garage ke komponen Car:

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'));

Jika kamu memiliki variabel untuk dikirim, dan bukan string seperti pada contoh di atas, kamu cukup memasukkan nama variabel ke dalam kurung keriting:

Contoh

Buat variabel bernama “carname” dan kirim ke komponen Car:

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'));

Atau jika itu adalah objek:

Contoh

Buat objek bernama “carinfo” dan kirim ke komponen Car:

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'));

Props dalam Konstruktor

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

Contoh

class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>I am a Car!</h2>;
  }
}
 
ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));

Catatan: Props React hanya untuk dibaca! kamu akan mengalami error jika kamu mencoba mengubah nilainya.