Adjust where HTML gets rendered in a map loop - reactjs

Question

I have an array of HTML elements that I want to render on a page, but depending on the element I'd like to adjust how they get wrapped.
const sections = [
{
id: 'top',
},
{
id: 'left',
},
{
id: 'right',
},
{
id: 'bottom',
}
]
const Element = (props) => {
return <div id={props.id}>hello</div>
}
const ArticleRightRail = (props) =>
<div>
<header>
</header>
<article>
{sections.map((section, i) => <Element key={i} {...section} >hello!</Element> )}
</article>
</div>
In the example above I want any id which is not top or bottom to be rendered within <article>, and anything that is top or bottom to be rendered within <header> tags. What is the best way of handling a situation like this with React?

Answer 1

Use ES6 array filter method to filter sections array as below:
const listForHeader = sections.filter((section, i) => {
return section === "top" || section === "bottom";
});
const listForArticle = sections.filter((section, i) => {
return section != "top" || section != "bottom";
})
Then use above 2 lists in HEADER and ARTICLE tags respectively using array map method.

Answer 2

check this
const listHeader = sections.filter((section, i) => {
return section === "top" || section === "bottom";
});
const listArticle = sections.filter((section, i) => {
return section != "top" || section != "bottom";
})

Answer 3

#JamesIves, the react code is:
const listForHeader = sections.filter((section, i) => {
return section === "top" || section === "bottom";
});
const listForArticle = sections.filter((section, i) => {
return section != "top" || section != "bottom";
})
const ArticleRightRail = (props) =>
<div>
<header>
{listForHeader.map((section, i) => <Element key={i} {...section} >hello!</Element> )}
</header>
<article>
{listForArticle.map((section, i) => <Element key={i} {...section} >hello!</Element> )}
</article>
</div>