React Props

Sure! Here's a simple example demonstrating how props work in React:

        // ParentComponent.js
      import React from 'react';
      import ChildComponent from './ChildComponent';
      
      function ParentComponent() {
        return <ChildComponent name="John" age={30} />;
      }
      
      export default ParentComponent;
      
      
      // ChildComponent.js
      import React from 'react';
      
      function ChildComponent(props) {
        return (
          <div>
            <p>Name: {props.name}</p>
            <p>Age: {props.age}</p>
          </div>
        );
      }
      
      export default ChildComponent;
      

In this example:

• We have a parent component ParentComponent that renders a ChildComponent.
• We pass two props, name and age, to the ChildComponent from the ParentComponent.
• In the ChildComponent, we access these props using props.name and props.age and render them inside JSX.

When ParentComponent is rendered, it will display the ChildComponent, passing the name prop with the value "John" and the age prop with the value 30. The ChildComponent will then render these props, resulting in output like this:

        Name: John
        Age: 30
      

This demonstrates how props can be used to pass data from a parent component to a child component in React.