Estoy intentando enumerar las publicaciones consultadas en el DOM usando Gatsby. El pequeño fragmento a continuación debería ser suficiente porque la consulta de Graphql está obteniendo datos correctamente. Este fragmento está dentro del componente, que también se representa correctamente. Soy nuevo en Gatsby y React, y espero que me esté perdiendo algo bastante básico.
<div className="container"> Hello! // Renders {newsItems.map(newsItem => { console.log(newsItem.context.id); // Logs each news item id to console correctly Hello! // Does not render <p>{newsItem.context.id}</p> // Does not render })} </div>Has usado llaves, así es como devuelves el componente de la función de mapa.
{newsItems.map(newsItem => { console.log(newsItem.context.id); // Logs each news item id to console correctly return ( <> Hello! <p>{newsItem.context.id}</p> </> ) })} No he probado esto, pero debería funcionar. Esto también solo funciona si newsItems contiene valores. Se usaron React Fragments <>...</> porque el retorno solo debe devolver un componente. También podría usar <div>...</div> en lugar de fragmento.
Prueba esto.