React - How to iterate over an array of objects and display each item as a component?

Question

I am using React and I have an array of data objects ("items"). I am trying to display this list of objects such that each object is its own component. So I'm calling "items.map" to map each item to a component and render it, like this:

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>
        )

Here is the code for 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>);
}

However, I'm getting an error saying that "item" is null in MyItem.js, while the list of items is definitely not null. Similarly, when I pass in the number 4 to the "example" prop, and I do "console.log(example)" it prints out the empty object "{}".

I should note that my page previously did display everything when both pieces of code were combined on the same page (i.e. there was no "MyItem" component). The reason I decided to make it a component was because I'm iterating over this map on multiple pages and it would be redundant code. This way, I can just call <MyItem item{_item} /> and it will display the same thing on every page that shows these items.

However, now that I have refactored my code to place the mapping inside of the component, it is no longer working. What am I doing wrong here? Is this even possible, or should I just go back to what I had before?

Props are passed to components as objects. Use object destructuring in const MyItem = (example, item) instead. — idmean
– idmean, Commented Feb 17, 2022 at 0:19
Thanks, that worked! The working code is "const MyItem = ({example, item})" for those who might see this and are unaware of object destructing. — Kinjo
– Kinjo, Commented Feb 17, 2022 at 0:24

Kinjo · Accepted Answer · 2022-02-17 00:26:15Z

1

As mentioned in the above comment:

const MyItem = ({example, item})

This solves the problem.

answered Feb 17, 2022 at 0:26

Kinjo

531 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React - How to iterate over an array of objects and display each item as a component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related