Unexpected token in JSX when using conditional statements - reactjs

Question

I'm trying to wrap every 3 items with a carousel component, but unfortunately as soon as I change the <p>start</p> <p>end</p> test element to the real component I get the following error:
"Unexpected token. Did you mean `{'}'}` or `&rbrace;`?",
const Alerts = (props) => {
const alerts = props.data;
let pager = 1;
return (
<ul className={styles.alerts}>
<Swiper
spaceBetween={30}
pagination={{
clickable: true,
}}
className="mySwiper"
>
{alerts.map((e, index) => (
<>
{pager % 4 === 0 || pager === 1 ? (<p>start</p>) : ""}
<div key={index} id={`alert-${index}`} className={styles.alert}>
<div className={styles.alert__content}>
<div className={styles.alert__content_top}>
<strong>
{e.token}
<a href={e.token_link}>
<i className="fa fa-external-link"></i>
</a>
</strong>
<span>{e.date}</span>
</div>
<div className={styles.alert__desc}>{e.description}</div>
</div>
<div className={styles.alert__type}>{e.type}</div>
</div>
{pager % 3 === 0 ? (<p>end</p>) : ""}
{pager === 3 ? (pager = 0) : ""}
{(pager = pager + 1)}
</>
))}
</Swiper>
</ul>
);
};
After the modification the lines looks like this:
{pager % 4 === 0 || pager === 1 ? (<SwiperSlide>) : ""}
and
{pager % 4 === 0 || pager === 1 ? (</SwiperSlide>) : ""}
What's wrong with the syntax? The numbers from the pager variable also visible on the site, maybe it's related to my syntax error?

Answer 1

The problem is <p>start</p> is correct JSX element. And <SwiperSlide> is just a part of element.
I'd recommend you convert your initial data array into a new array with small arrays with 3 elements in each. And go through it with two maps:
function splitToBulks(arr, bulkSize = 20) {
const bulks = [];
for (let i = 0; i < Math.ceil(arr.length / bulkSize); i++) {
bulks.push(arr.slice(i * bulkSize, (i + 1) * bulkSize));
}
return bulks;
}
const Alerts = (props) => {
const alerts = splitToBulks(props.data, 3);
let pager = 1;
return (
<ul className={styles.alerts}>
<Swiper
spaceBetween={30}
pagination={{
clickable: true,
}}
className="mySwiper"
>
{alerts.map((allerts3, index) => (
<SwiperSlide>
{allerts3.map((e, index) => (
<div key={index} id={`alert-${index}`} className={styles.alert}>
<div className={styles.alert__content}>
<div className={styles.alert__content_top}>
<strong>
{e.token}
<a href={e.token_link}>
<i className="fa fa-external-link"></i>
</a>
</strong>
<span>{e.date}</span>
</div>
<div className={styles.alert__desc}>{e.description}</div>
</div>
<div className={styles.alert__type}>{e.type}</div>
</div>
)}
</SwiperSlide>
)}
</>
))}
</Swiper>
</ul>
);
};