Tengo una aplicación de reacción en la que se supone que debo obtener usuarios de un punto final de API: <reqres.in>.
Se supone que debo devolver tantos botones en la página de inicio como la cantidad de usuarios que obtengo al obtener los usuarios de la API.
Además, estoy obligado a no agregar detectores de eventos a todos los botones y solo agregar un detector al envoltorio para los botones. El código del mismo es:
const ButtonContainer = ({ users }) => { // const navigate=useNavigate(); const wrapper = document.getElementById('wrapper'); wrapper.addEventListener('click', (event) => { const isButton = event.target.nodeName === 'BUTTON'; if (!isButton) { return; } // navigate(`/singleuser/${event.target.id}`); }) return ( <div id='wrapper'> { users.map((user, idx) => { return ( <button key={idx} id={idx}> User {idx} </button> ) }) } </div> ) } export default ButtonContainerusuarios es la matriz de usuarios que obtengo de la API.
Sin embargo, recibo el error:
Cannot read properties of null (reading 'addEventListener')¿Qué tengo que hacer?
El uso de métodos DOM nativos con React no le dará el resultado que desea, ya que React tiene su propia forma de administrar el DOM.
Agregue un onClick a su elemento contenedor:
<div onClick={handleClick}> y luego hacer que handleClick se ocupe del evento.
function Example({ users }) { function handleClick(e) { // Because we're using event delegation [1] // check if the clicked element was a user button if (e.target.matches('button.user')) { // Extract the id from its dataset, // and log it const { id } = e.target.dataset; console.log(`User: ${id}`); } } return ( <div onClick={handleClick}> {users.map(user => { return ( <button key={user.id} className="user" data-id={user.id} >User: {user.id} </button> ); })} </div> ); } const users = [{ id: 1 }, { id: 2 }, { id: 3 }]; ReactDOM.render( <Example users={users} />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>