Tengo un componente Iterator dentro de mi aplicación que itera sobre un conjunto determinado de elementos y los imprime en la página. Por lo general, el componente funciona bien. Sin embargo, me encontré con un problema extraño con React , donde, a pesar de que los componentes secundarios están envueltos en un componente Fragment , React aún arrojará 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>

Solo cuando elimino uno de los itemValue?.type === ... el código se procesa como se esperaba.

Puede que me esté perdiendo algo, pero no puedo identificarlo. ¿Qué pasa aquí?