Estoy extrayendo datos de una consulta GraphQL y mapeando a través de la matriz en mi aplicación React, puedo ver si registro en la consola que todos los datos están allí según lo solicitado, pero cuando los mapeo, simplemente no aparece nada. mi pantalla, no hay error, no genera ningún elemento HTML ni nada a pesar de ser similar a cualquier otro mapa de matriz que he hecho hasta ahora.
Mi parte de mapeo de mi componente es la siguiente:
const CareerFeed = React.forwardRef((props, ref) => { return ( <CareerFeedWrapper ref={ref}> <Container width={14}> {console.log(props.array)} {props.array.map((item, index) => { <CareerItem key={index}> {item.title} </CareerItem> })} </Container> </CareerFeedWrapper> ) })No está devolviendo nada de la función .map : cuando usa corchetes, la función de flecha ya no devuelve implícitamente. Deberá utilizar la declaración de return :
{props.array.map((item, index) => { return ( <CareerItem key={index}> {item.title} </CareerItem> ); })}Alternativamente, elimine los corchetes y envuelva el JSX devuelto entre paréntesis para aprovechar las devoluciones explícitas:
{props.array.map((item, index) => ( <CareerItem key={index}> {item.title} </CareerItem> ))}Parece que falta una declaración de devolución en el mapa. Esto significa que en realidad está iterando a través de la matriz y reemplazando cada uno con un objeto nulo. Prueba esto:
return ( <CareerFeedWrapper ref={ref}> <Container width={14}> {console.log(props.array)} {props.array.map((item, index) => { return (<CareerItem key={index}> //added return {item.title} </CareerItem>) //added closing parentheses for return })} </Container> </CareerFeedWrapper> ) })