Estoy tratando de hacer un elemento div para cada elemento en una matriz usando reactjs JSX. No estaba seguro de cómo hacer esto realmente, pero traté de hacer esto:
{results.forEach(element => { <div className={classes.SearchResults}> {results[element]} </div> })}Esto no funcionó, pero estoy bastante seguro de que es algo así. No recibo resultados de errores, es un elemento de matriz que definí en otro lugar y que funciona completamente. El único problema es mostrar un nuevo elemento div para cada uno de los elementos dentro de la matriz de resultados. Si necesita más código, me complacerá dárselo, aunque creo que debería ser una cantidad suficiente.
Cerca.
Primero, desea .map() , no .forEach() . El último simplemente itera pero no devuelve nada, mientras que el primero devuelve una nueva matriz (con el mismo tamaño que el original) "asignada" a una nueva estructura de elementos (en este caso, elementos JSX).
Aparte de eso... El uso de llaves {} aquí crea un cuerpo de función, que en este caso consiste en un elemento JSX pero no devuelve nada:
{ <div className={classes.SearchResults}> {results[element]} </div> }Puede devolver el elemento explícitamente:
{ return (<div className={classes.SearchResults}> {results[element]} </div>); } O use un retorno implícito de la función de flecha usando paréntesis () alrededor para que toda la función sea solo una declaración (en lugar de un cuerpo de función explícito):
( <div className={classes.SearchResults}> {results[element]} </div> ) Además... El uso de results[element] se ve mal aquí. El primer argumento de devolución de llamada a .map() no es el índice , es el elemento en sí. Sospecho que quieres esto:
( <div className={classes.SearchResults}> {element} </div> ) Como nota final, en React verá advertencias si itera sobre una matriz como esta para producir JSX pero no proporciona una propiedad key para el elemento JSX. Si el objeto del element tiene un identificador, como una propiedad de id , puede usar eso:
( <div key={element.id} className={classes.SearchResults}> {element} </div> ) Pero si eso falla, siempre puede confiar en el segundo argumento de la devolución de llamada .map() , que es solo el índice del elemento de la matriz:
{results.map((element, i) => ( <div key={i} className={classes.SearchResults}> {element} </div> ))}Estás cerca, pero estás usando el método de matriz incorrecto aquí. Array.map() devuelve una nueva matriz, y puede usarla para devolver una matriz de divs para representar cada elemento en la matriz de results .
Para más detalles, echa un vistazo aquí: https://reactjs.org/docs/lists-and-keys.html
forEach simplemente ejecuta su devolución de llamada ignorando el valor de retorno
map se usa para transformar y devolver un nuevo valor para cada iteración, por lo tanto, puede usar lo siguiente en su lugar:
{results.map((element, index) => { return ( <div className={classes.SearchResults} key={index}> {results[element]} </div> ) })}