Tengo una aplicación simple con 3 componentes React apilados uno encima del otro:

 function App() { return ( <Fragment> <div className="container"> <ListSuppliers/> <InputContact/> <ListContact/> </div> </Fragment> ); }

En mi componente ListSuppliers tengo un menú desplegable, en mi componente InputContact tengo un formulario de entrada y en mi ListContact tengo una tabla html así:

 return <Fragment> <h1>List Contact</h1> <table className="table mt-5"> <thead> <tr> <th>Contact Name</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> {contacts.map(contact => ( <tr key={contact.contact_id}> <td>{contact.contact_name}</td> <td><EditContact contact={contact}/></td> <td><button className="btn btn-danger" onClick={()=> deleteContact(contact.contact_id)}>Delete</button></td> </tr> ))} </tbody> </table> </Fragment>

Quiero que mi tabla html en el componente ListContact se complete según la selección del menú en el componente ListSuppliers :

 //Select function const chooseSupplier = async (id) => { try { const response = await fetch(`http://localhost:5000/contact_supplier/${id}`,{ method: "GET" }); const jsonData = await response.json(); console.log(jsonData); } catch (err) { console.log(err.message); } } //Route app.get("/contact_supplier/:id", async (req, res) => { try { const {id} = req.params; const contact = await pool.query('SELECT * FROM contact WHERE supplier_id = $1 ORDER BY contact_id ASC', [id]); res.json(contact.rows); } catch (err) { console.error(err.message); } })

Hasta ahora, puedo recibir la consulta que necesito en formato json, sin embargo, no estoy seguro de cómo consultar desde un objetivo de componente a un objeto en otro en este caso.