Estoy tratando de crear dinámicamente algunos elementos basados en una lista de objetos JSON como este:
{Object.entries(this.state.topTen).forEach(([name]) => { console.log(name); // this correctly print the list of names React.createElement(MyCustomComponent, {name: name}); })}También probé el siguiente enfoque dentro del ciclo:
<MyCustomComponentname={name} /> Pero no veo nada representado en la pantalla, estoy seguro de que this.state.topTen tiene la información correcta porque el archivo console.log dentro del bucle muestra la información correcta. Y si agrego <MyCustomComponentname={name} /> fuera del bucle, el componente se representa correctamente.
El método .forEach() no devolverá nada. Deberá usar el método .map() de la matriz y devolver el resultado de React.createElement(MyCustomComponent, {name: name}); .
Por ejemplo:
{Object.entries(this.state.topTen).map(([name]) => { console.log(name); // this correctly print the list of names return React.createElement(MyCustomComponent, {name: name}); })} El uso de .map() devolverá una matriz con los elementos que haya devuelto dentro de la devolución de llamada. Esta matriz resultante se puede representar con React porque la devolución de llamada devuelve el resultado de React.createElement(...) .
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Estoy completamente de acuerdo con la respuesta sugerida por Bradon, también es mejor pasar el accesorio clave de la matriz al componente secundario, lo que aumentará el rendimiento de la aplicación mientras se vuelve a renderizar y también puede eliminar problemas inesperados. https://reactjs.org/docs/lists-and-keys.html vaya al enlace para mayor claridad.