How to pass props between components in React?

You can pass props between components in React by passing them as arguments when rendering a component. Here's an example of how you can pass props from a parent component to a child component:

ParentComponent.js:

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const name = 'Alice';
  
  return (
    <ChildComponent name={name} />
  );
}

export default ParentComponent;

ChildComponent.js:

import React from 'react';

const ChildComponent = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

export default ChildComponent;

In this example, the ParentComponent passes the name prop to the ChildComponent by including name={name} in the <ChildComponent /> element. The name prop is then accessed in the ChildComponent using props.name.

You can also pass props through multiple levels of components by continuing to pass them down as arguments. This allows you to share data and functionality between different parts of your application.