Tengo dos archivos Sidebar y UserDataElements.
Quiero mostrar datos de UserDataElements en Sidebar
he intentado esto
Este es el archivo principal donde estoy obteniendo ambos archivos.
<Sidebar> <UserDataElements></UserDataElements> </Sidebar>Barra lateral.js
import React from "react"; import SidebarElements from "./SidebarElements"; const Sidebar = () => { return ( <div className="sideBar"> <SidebarElements></SidebarElements> </div> ); }; export default Sidebar;Elementos de datos de usuario.js
import React from "react"; import userData from "./userData"; const UserDataElements = () => { return ( <div> UserData <ul className="user-ul"> {userData.map((val, key) => { return ( <li key={key} onClick={() => { window.location.pathname = val.link; }} className="userDataList" > <div className="d-flex "> <div id="name">{val.name}</div> <div id="branch">{val.branch}</div> </div> </li> ); })} </ul> </div> ); }; export default UserDataElements;Usa accesorios para eso, que es como un atributo en HTML, por ejemplo, si desea pasar datos de padre a hijo, puede hacerlo así
<Sidebar> <UserDataElements data1={"some_data"} data2={"another_data"}> </UserDataElements> </Sidebar>Y en UserDataElements puedes acceder usando props
const UserDataElements = ({ data1, data2 }) => { // Here data1 and data2 will contain the data you have sent from parent to child .... }O digamos que desea pasar datos de niño a padre, tal vez al hacer clic o algo así, entonces puede hacerlo así
import React from "react"; import userData from "./userData"; const UserDataElements = ({ data1, data2, onItemClick }) => { return ( <div> UserData <ul className="user-ul"> {userData.map((val, key) => { return ( <li key={key} onClick={() => onItemClick && onItemClick(val, key)} className="userDataList" > <div className="d-flex "> <div id="name">{val.name}</div> <div id="branch">{val.branch}</div> </div> </li> ); })} </ul> </div> ); }; export default UserDataElements;Tenga en cuenta esta línea específica
onClick={() => onItemClick && onItemClick(val, key)}Aquí estamos invocando el método de devolución de llamada principal, pero antes de eso verificamos si existe, y en el componente principal podemos acceder a él como
import React from "react"; import SidebarElements from "./SidebarElements"; const Sidebar = () => { return ( <div className="sideBar"> <SidebarElements onItemClick={(val, key) => { // here you get access to data of clicked element from child to parent }} > </SidebarElements> </div> ); }; export default Sidebar;Debería leer más sobre componentes y accesorios https://reactjs.org/docs/components-and-props.html