Mi App.js tiene esta estructura.
return ( <Container fluid="true" className="h-100"> <Header /> <Row className="contentRow"> <CustomerList /> <DetailPage /> </Row> </Container> );Hay muchos elementos en CustomerList. Con un clic quiero enviar el ID del elemento a DetailPage y mostrar los detalles del elemento asociado. Pero todavía soy bastante nuevo en reaccionar y realmente no sé cómo pasar los datos. O incluso si necesito cambiar algo en la estructura de los componentes.
Debe definir una nueva variable de estado en su componente.
Luego, páselo con la función de establecimiento a CustomerList .
Definir variable de estado.
const [id, setId] = useState(null); Luego setter la función de establecimiento a <CustomerList />
<CustomerList setId={setId} /> // on CustomerList click event const onClick = (event) => { // your logic and use setId from props. // This is just an example. props.setId(event.target.value); } Finalmente, pase la variable de estado de id a <DetailPage /> para que su componente DetailPage la use en sus accesorios.
<DetailPage id={id} /> Uso en la página de Detailpage :
const DetailPage = (props) => { const id = props.id; // use id for your purpose. }Puede utilizar la propiedad event.target.id. agregar una función onclick:
onClick={(e) => handleClick(e)} handleClick = (e) => { //access e.target.id here }A ver si esto te ayuda:
import React, { useState } from "react"; const Header = () => <div />; const CustomerList = ({ onChange }) => ( <ul> {["item1", "item2", "item3", "item4"].map((item) => ( <li onClick={() => onChange(item)} key={item}> {item} </li> ))} </ul> ); const DetailPage = ({ selectedItem }) => <div>{selectedItem}</div>; const Component = () => { const [selectedItem, setSelectedItem] = useState(null); const handleChange = (item) => { setSelectedItem(item); }; return ( <div> {/* Container */} <Header /> <div className="contentRow"> {/* Row */} <CustomerList onChange={handleChange} /> <DetailPage selectedItem={selectedItem} /> </div> </div> ); }; Cuando hace clic en algún elemento, establecemos el estado en el componente principal y luego lo enviamos a DetailPage, en DetailPage, puede usar este elemento seleccionado para mostrar la información. También puede reemplazar ["item1", "item2", "item3", "item4"] con una matriz de objetos.