CODEWITHSUNDEEP
javascriptreactjsreact-props
Kinjo
Kinjo

Reputation: 53

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

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?

Upvotes: 0

Views: 2130

Answers (1)

Kinjo
Kinjo

Reputation: 53

As mentioned in the above comment:

const MyItem = ({example, item})

This solves the problem.

Upvotes: 1

Related Questions