Pass Data from One Component to Another in React

This tutorial is about learning how to pass data from one component to another component in React.

Let the following be a component where we will pass data in props from another component:

import React from 'react';
  
function Second(props) {
    return(
      <p> {props.data} </p>
    );
}
  
export default Second;

Let the following be our another component from where we will pass data to the above Second component:

import React from 'react'
import First from './Second';
  
const First = () => {
const data = "Data from first component";
    return(
        <div>
          <Second data={data}/>
        </div>
    );
}
  
export default First;