How can I pass a value from a function to any component in React?

Question

I want to pass a value which I am receiving in a function like this:

const ViewDetails = item => () => {
   console.log(item);
   toggleModal();
}

I want to pass the item to Modal component like open,onclose which is called in the Main function:

return (
   <Layout title="Dashboard" className="container-fluid">
      {<Modal open={modalStatus} onClose={() => setModalStatus(false)} />}
      <div className="row">
         <div className="col-sm-3">
            <UserLinks />
         </div>
         <div className="col-sm-9">
             <UserInfo />
             {orders ? <PurchaseHistory /> : ""}
         </div>
      </div>
   </Layout>
)

I am expecting to have something like this: {<Modal open={modalStatus} onClose={() => setModalStatus(false)} ***item={item}***/>} so that I can use the values inside item in Modal component.

Answer 1

You have to take state for this item. When viewDetails function triggered from inside this function you can set this state with this item afte can be pass this state as a props any component