Props - Next Js App Directory 13.4

What is Props?

Props are arguments passed into React components from parent to the child component

Parent component in App.jsx

function App() {
  return (
    <div className="App">
      <ChildComponent productName="Laptop" productPrice={5000000} />
    </div>
  );
}
export default App;

Child component in ChildComponent.jsx

const ChildComponent = props => {
  return (
    <div>
      <p>Product Name: {props.productName}</p>
      <p>Price: Rp{props.productPrice}</p>
    </div>
  );
};
export default ChildComponent;

in this example we sent productName and productPrice from App.jsx to ChildComponent.jsx

Hope this helps!

Comments

[Bayu Setiawan]

Hi, kindly leave a like and comment if you got new insight! 🔥