Search code examples
javascriptreactjsreact-props

How to send data from one react component to another react component?


Here I get some data from the 'Order' component and then I want to send this data to Navigate but all I get when using 'props.order_data' in 'Navigate' is undefined. How can I use this data in 'Navigate'?

function App(){

  function getData(some){
    console.log(some);
    return(<Navigate order_data= {some}/>);
  }
  return(
    <div>
      <Navigate />
      <Service/>
      <Order onAdd={getData}/>
      <Review />
      <Foot />
  </div>
  );
}
export default App;

Solution

  • You need to use useState hook to maintain a state. Since you have your Navigate and Order component in the same Parent App.

    Do like this

     import { useState } from "react";
    
     function App(){
    
      const [some, setSome] = useState(null); // Initial some value is null
    
      function getData(data){
        setSome(data); // This will update some state value
      }
      return(
        <div>
          <Navigate order_data={some}/> 
          <Service/>
          <Order onAdd={getData}/>
          <Review />
          <Foot />
      </div>
      );
    }
    export default App;