¿Cómo puedo llamar a una función que pertenece a un componente hermano con accesorios o contexto?
He estado tratando de hacer esto usando accesorios y contexto, pero me estoy confundiendo porque no estoy pasando variables sino una función real con parámetros.
Quiero llamar a la función handleSelectedUser que está dentro del componente Lista cuando hago clic en el botón Eliminar en el componente Tarjeta.
Aquí está en acción en Replit
aquí está mi código
Componente de la aplicación:
function App() { const [currentUser, setCurrentUser] = useState(null) return ( <main> <List setCurrentUser={setCurrentUser} /> <Card currentUser={currentUser} setCurrentUser={setCurrentUser} /> </main> ); }Componente de lista
function List({setCurrentUser}) { const [users, setUsers] = useState([]) useEffect(() => { getUsers() }, []) async function getUsers(){ const apiUrl = "https://randomuser.me/api?results=40" const result = await fetch(apiUrl) const data = await result.json() setUsers(data.results) } function handleDeleteSelectedUser(userToDelete){ users.filter(user => user.phone != userToDelete.phone) } function handleSelectedUser(selectedUser){ setCurrentUser(selectedUser) } return( <> <div> <h1>List</h1> { users.map((user) => <li onClick={() => handleSelectedUser(user)} key={user.phone}> {user.name.first} {user.name.last}</li>) } </div> </> ) }Componente de tarjeta
function Card({currentUser, setCurrentUser}){ function handleDelete(user){ //Call handleSelectedUser in <List /> setCurrentUser(null) } return ( <div className="container"> {currentUser && <> <h2>{currentUser.name.first}'s Details</h2> <p>{currentUser.phone}</p> <button onClick={() => handleDelete(currentUser)}>Delete</button> </> } </div> ) }Si está tratando de "escuchar" los cambios en un componente hermano, un enfoque común es usar un accesorio compartido como una dependencia de enlace en el hermano.
Por ejemplo:
function List({ currentUser, setCurrentUser }) { const [users, setUsers] = useState([]); useEffect(() => { getUsers(); }, []); async function getUsers() { const apiUrl = "https://randomuser.me/api?results=40"; const result = await fetch(apiUrl); const data = await result.json(); setUsers(data.results); } function handleDeleteSelectedUser(userToDelete) { users.filter((user) => user.phone != userToDelete.phone); } function handleSelectedUser(selectedUser) { setCurrentUser(selectedUser); } useEffect(() => { // do something when currentUser changes handleSelectedUser(currentUser); }, [currentUser]); return ( <> <div> <h1>List</h1> {users.map((user) => ( <li onClick={() => handleSelectedUser(user)} key={user.phone}> {user.name.first} {user.name.last} </li> ))} </div> </> ); }