React Props Usage

In React, props (short for “properties”) are a way to pass data from a parent component to a child component. Props allow you to make your components dynamic and reusable by providing values that can be used within the child component.

In the code above, the App component serves as the parent component and renders the ChildComponent. It passes two props to the ChildComponent: message and number.

Parent Component (App.js):

Child Component (ChildComponent.js):

The ChildComponent is a functional component that receives the props object as a parameter. Inside the component, you can access the values of the props using dot notation, like props.message and props.number.

Now, when you render the App component, it will display the data passed as props in the ChildComponent. The {props.message} and {props.number} expressions in the ChildComponent display the values passed from the parent component.

Here’s how this application works:

When you render the App component, it displays the text "Parent Component" and then renders the ChildComponent.

The ChildComponent displays "Child Component" and then displays the values received via props. In this case, it will show "Received message: Hello from the parent component" and "Received number: 42."