Map() Method On Multi Dimensional Array In Gatsby/react, Getting Error While Trying To Wrap Inner Loop In Div

i want to display three posts per row in a gatsbyjs web page. i am having an array of posts, if i were to display using columns it would be just applying the multiline class on the

Solution 1:

You would need to wrap the code inside that div in curly braces { } to be valid JSX. Just like you did with the first chunks.map.

return(
        <divclassName="tile is-ancestor">
               {chunks.map((chunk)=> {
                 return (
                   <divclass="tile">
                    {
                      chunk.map((edge) => {
                          return(
                            <divclassName="tile is-parent is-4"><divclassName={`tileis-childnotification ${edge.node.frontmatter.type}`}><pclassName="is-7">{edge.node.frontmatter.date}</p><h2className="subtitle is-5">{edge.node.frontmatter.title}</h2><p>{edge.node.excerpt}</p></div></div>
                          )
                        }
                      )
                     }
                    </div>
                    )
            })}
        </div>
);