Question

How to pass data between react components?

Answer 1

Parent Component to Child Component (using props)
With the help of props, we can send data from a parent to a child component.
How do we do this?

Consider the following Parent Component:

import ChildComponent from "./Child";

    function ParentComponent(props) {
     let [counter, setCounter] = useState(0);
    
     let increment = () => setCounter(++counter);
    
     return (
       <div>
         <button onClick={increment}>Increment Counter</button>
         <ChildComponent counterValue={counter} />
       </div>
     );
    }
    

As one can see in the code above, we are rendering the child component inside the parent component, by providing a prop called counterValue. Value of the counter is being passed from the parent to the child component.
We can use the data passed by the parent component in the following way:

function ChildComponent(props) {
 return (
   <div>
     <p>Value of counter: {props.counterValue}</p>
   <span style="-webkit-font-smoothing:subpixel-antialiased; border:0px; box-sizing:borde