问题
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 posts container div. but i am using tiles layout built-in in bulma css, unfortunately that don't support multiline likes columns do.
so i have to wrap every three posts in a div with class 'tile'. for which i split the array into chunks of 3 size each (as suggested by someone here, thanks to him) now it boiled down to looping through a two dimensional array.
now the problem is i am getting syntax error when trying to wrap the inner loop in a div (i am new to javascript/es6 and react/gatsby, so i am hoping someone here would help me out) below is the code, i commented out the divs for which i am getting error. so how to wrap the inner loop in a div in gatsby/react. TIA
return(
<div className="tile is-ancestor">
{chunks.map((chunk)=> {
return (
//<div class="tile">
chunk.map((edge) => {
return(
<div className="tile is-parent is-4">
<div className={`tile is-child notification ${edge.node.frontmatter.type}`}>
<p className="is-7">{edge.node.frontmatter.date}</p>
<h2 className="subtitle is-5">{edge.node.frontmatter.title}</h2>
<p>{edge.node.excerpt}</p>
</div>
</div>
)
}
)
//</div>
)
})}
</div>
);
回答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(
<div className="tile is-ancestor">
{chunks.map((chunk)=> {
return (
<div class="tile">
{
chunk.map((edge) => {
return(
<div className="tile is-parent is-4">
<div className={`tile is-child notification ${edge.node.frontmatter.type}`}>
<p className="is-7">{edge.node.frontmatter.date}</p>
<h2 className="subtitle is-5">{edge.node.frontmatter.title}</h2>
<p>{edge.node.excerpt}</p>
</div>
</div>
)
}
)
}
</div>
)
})}
</div>
);
来源:https://stackoverflow.com/questions/62587657/map-method-on-multi-dimensional-array-in-gatsby-react-getting-error-while-try