Estoy usando React y tengo una matriz de objetos de datos ("elementos"). Estoy tratando de mostrar esta lista de objetos de modo que cada objeto sea su propio componente. Así que estoy llamando a "items.map" para asignar cada elemento a un componente y representarlo, así:

 return ( <Fragment> <h1>Items</h1> <Card.Group itemsPerRow={8} > {items.length > 0 ? ( items.map( (_item) => ( <Fragment key={_item.key}> <MyItem example={4} item={_item} /> </Fragment> )) ) : (<p>No items!</p>)} </Card.Group> </Fragment> )

Aquí está el código para MyItem:

 const MyItem = (example, item) => { console.log(example); console.log(item); return (<Fragment> <div style={{margin: "1em"}}> <Card> <Image src={item.image} wrapped ui={false} /> <Card.Content> <Card.Header>{item.name}</Card.Header> <Card.Description> <p>Date Received: {item.dateReceived.toLocaleDateString()}</p> </Card.Description> </Card.Content> </Card> </div> </Fragment>); }

Sin embargo, recibo un error que dice que "elemento" es nulo en MyItem.js, mientras que la lista de elementos definitivamente no es nula. De manera similar, cuando paso el número 4 a la propiedad "ejemplo", y hago "console.log(ejemplo)", imprime el objeto vacío "{}".

Debo señalar que mi página anteriormente mostraba todo cuando ambos fragmentos de código se combinaban en la misma página (es decir, no había ningún componente "MyItem"). La razón por la que decidí convertirlo en un componente fue porque estoy iterando sobre este mapa en varias páginas y sería un código redundante. De esta manera, puedo simplemente llamar a <MyItem item{_item} /> y mostrará lo mismo en cada página que muestre estos elementos.

Sin embargo, ahora que he refactorizado mi código para colocar la asignación dentro del componente, ya no funciona. ¿Qué estoy haciendo mal aquí? ¿Es esto posible, o debería volver a lo que tenía antes?