I have an Iterator
component inside my app which iterates over a given set of items and prints them to the page. Usually, the component works just fine. However, I've encountered a weird issue with React, where - despite the child components being wrapped in a Fragment
component, React will still throw unexpected token div
.
const Iterator = ({ items, children, ...props }) => (
<div {...props}>
{ items.map((data, key) => (
<Fragment key={key}>
{ children(data, key) }
</Fragment>
))}
</div>
);
// This "parent" element is the one that throws the error.
<div className={styles.parent}>
<Iterator items={items} className={styles.child}>{itemValue => (
<Fragment>
{ itemValue?.type === "a" && (
// Conditionally render a
)}
{ itemValue?.type === "b" && (
// Conditionally render b
)}
</Fragment>
)}</Iterator>
</div>
Only when I remove one of the itemValue?.type === ...
blocks does the code render as expected.
I may be missing something, but I can't put my finger on it. What's wrong here?