React Props

"props" is a shorthand for "properties," and it is a mechanism for passing data from a parent component to a child component.

Props are a way to make components dynamic and reusable by allowing them to receive values from their parent components.

Here's a simple example of how props work in React:

1.Parent Component:


                  import React from 'react';

import ChildComponent from './ChildComponent';



const ParentComponent = () => {

  const title = 'Welcome to React';

  const description = 'Props make data transfer between components easy!';


  return (

    <div>

       <ChildComponent title={title} description={description} />
     </div>

  );

};



export default ParentComponent;

2.Child Component:


                  import React from 'react';


const ChildComponent = (props) => {

  return (

     <div>

       <h1>{props.title} </h1>

       <p>{props.description} </p>

     </div>

  );

};



export default ChildComponent;

In this example:

The 'ParentComponent' defines 'title' and description variables.

It renders the 'ChildComponent' and passes these values as props.

The 'ChildComponent' receives these props and uses them to render content dynamically.