Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

69
Views
why is my react fragment throwing an unexpected token div error

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?

7 months ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.