React Carousel with Multiple Items - reactjs

Question

I'm having problems with my slider with ternary conditions, how may I solve it?
It considers that i'm closing the item before the last clause is done. This is a trying of build a multi-item carousel.
<Carousel className="col-md-7 col-11" indicators="true" controls="false">
{this.props.children.map((rooms,index) =>
(index === 0 || index % 3 === 0) ? <Carousel.Item><h1>First</h1> :
((index+1) % 3 === 0) ? <h1>Last</h1></Carousel.Item> : <h1>Middle</h1>
)
}
</Carousel>

Answer 1

The problem is that this isn't valid JSX.
You can't render an opening <Carousel.Item> tag without a closing tag as part of the same expression. It's clear what you're trying to do here but it can't work because the JSX compiler can't 'know' that the closing tag will ever be rendered, because that's dependant on children. You have to render opening and closing tags as part of the same expression in order for the JSX to compile.
Probably the cleanest thing is to do the grouping of the children in a separate function and then map the result, simply rendering each group inside <Carousel.Item></Carousel.Item>, like so:
function groupIntoThrees (children) {
const output = []
let currentGroup = []
children.forEach((child, index) => {
currentGroup.push(child)
if (index % 3 === 2) {
output.push(currentGroup)
currentGroup = []
}
})
return output
}
... later in render method ...
<Carousel className="col-md-7 col-11" indicators="true" controls="false">
{groupIntoThrees(this.props.children).map((group) => (
<Carousel.Item>
<h1>first: {group[0]}</h1>
<h1>middle: {group[1]}</h1>
<h1>last: {group[2]}</h1>
</Carousel.Item>
)}
</Carousel>