PROPS REACT

Props (singkatan dari “properties”) adalah cara untuk mengirim data dari satu komponen ke komponen lain di React. Props memungkinkan kita membuat komponen yang dinamis dan dapat digunakan kembali.

Contoh Penggunaan Props di React

Misalnya, kita bisa membuat komponen Greeting yang menerima nama sebagai props:

// Greeting.js
function Greeting(props) {
  return <h1>Halo, {props.name}!</h1>;
} 

export default Greeting;

Kemudian, kita bisa menggunakan komponen Greeting ini di file lain seperti App.js dan mengirimkan nama sebagai props:

// App.js
import Greeting from './Greeting';  

function App() {
  return (
    <div>
      <Greeting name="Tiqa" />
      <Greeting name="Endy" />
      <Greeting name="Hilman" />
    </div>
  );
}
export default App;

Dengan cara ini, kita bisa mengirim data (seperti nama) ke komponen Greeting dan menampilkannya. Props membuat komponen kita lebih fleksibel dan dapat digunakan di berbagai konteks dengan data yang berbeda.

Lebih dari satu Props

Kita juga bisa mengirim lebih dari satu props ke komponen. Misalnya, kita bisa mengirimkan nama dan umur:

// Greeting.js
function Greeting(props) {  
  return <h1>Halo, {props.name}! Kamu berumur {props.age} tahun.</h1>;
} 
export default Greeting;

Kemudian, kita bisa menggunakannya di App.js:

// App.js
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Tiqa" age={20} />
      <Greeting name="Endy" age={22} />
      <Greeting name="Hilman" age={21} />
    </div>
  );
} 

export default App;

Dengan cara ini, kita bisa mengirim beberapa data ke komponen yang sama, membuatnya lebih dinamis.

Kurung kurawal pada JSX

Kenapa age menggunakan kurung kurawal {}? Karena kita ingin mengirimkan nilai sebagai ekspresi JavaScript, bukan string biasa. Jika kita menulis age="20", maka itu akan dianggap sebagai string, bukan angka. Dengan {20}, kita mengirimkan nilai angka 20.