Tengo una página HTML renderizada usando React. Recuperé una lista de objetos que representan sitios web y los almacené en la memoria, y puedo mostrarlos en una lista larga en la página sin problemas.

He agregado un botón para cada objeto representado en la página. Creé un controlador de eventos para onClick que debería recibir una propiedad del objeto ( uid ), luego generar una nueva tabla en la página con detalles específicos de ese objeto.

Creo que me estoy perdiendo algo crucial en React, porque parece que no puedo pasar los datos del objeto al controlador de eventos.

HTML/JSX

 <div> <h2>results</h2> <ul> {countriesToShow.map((x, i) => { let uid = x.uid; return ( <li key={i} id={i}> {x.name.common}{' '} <button onClick={toggleShowCountry(uid)}>show</button> </li> ); })} </ul> </div> )

alternarMostrarpaís

 const toggleShowCountry = (x) => { console.log('this is uid', x); // TODO: get DOM object where the country resides and manipulate it };

Producción

Nada. Ni siquiera indefinido. Hacer clic en el botón no hace que aparezca nada en la consola, y en el renderizado inicial parece que toggleShowCountry se dispara automáticamente para cada objeto a medida que se renderiza.

Creo que esto podría tener algo que ver con la función "vincular" de JavaScript, pero no estoy totalmente seguro.