Mapping array to components fails in react

Question

I've a MealList component which lists an array of Meal components.

const MealList = (props) => {
    console.log(props.meals);// [Array(3)]

    return (
        <div style={{width: '70%'}}>
            <h3 style={{color: 'grey', fontSize: '1.4em', fontWeight: '700', marginBottom: '1em'}}><FontAwesomeIcon
                icon={faPlusCircle} style={{color: '#007bff', marginRight: '0.5em'}}/> ADD MEAL</h3>
            <Table striped bordered hover>
                <thead>
                <tr>
                    <th>#</th>
                    <th>Meal</th>
                    <th>Calories</th>
                    <th>Time</th>
                    <th>Date</th>
                    <th>Update</th>
                    <th>Delete</th>
                </tr>
                </thead>
                <tbody>
                    {props.meals.map(meal => <Meal label={meal.label} calories={meal.calories} time={meal.time}
                                               date={meal.date}/>)}
                </tbody>
            </Table>
        </div>

    )
};
export default MealList;

This is the structure of the array on the console.

[Array(3)]
0: Array(3)
0: {id: 8, label: "Breakfast", calories: 311, time: "20:10:00", date: "2019-12-29", …}
1: {id: 9, label: "Lunch", calories: 721, time: "20:10:00", date: "2019-12-29", …}
2: {id: 10, label: "Dinner", calories: 663, time: "20:10:00", date: "2019-12-29", …}
length: 3

Inside the Meal component though the props value render undefined.

const Meal = (props) => {
    console.log(props.label, props.calories, props.time, props.data);//undefined ....

    return (<tr>
        <td>1</td>
        <td>{props.label}</td>
        <td>{props.calories}</td>
        <td>{props.time}</td>
        <td>{props.date}</td>
        <td><FontAwesomeIcon icon={faUserEdit}/></td>
        <td><FontAwesomeIcon icon={faMinusCircle}/></td>
    </tr>);
};
export default Meal;

What am I doing wrong here?

Your code works fine, codesandbox.io/s/angry-bhaskara-30nf5, next time try add a producible example beforehand, it takes 1 min and 30 sec — Dennis Vash
– Dennis Vash, Commented Dec 29, 2019 at 21:26
What do your meal objects look like? Can you console log props.meals in your MealList component and paste the output here? — JMadelaine
– JMadelaine, Commented Dec 29, 2019 at 21:27
My guess is that the data is fetched asynchronously somewhere else and this is why this is failing. It didn't crashed because of what skyboyer said (array of array), but you need to handle the initial state where the array is either empty or unavailable, like null or undefined. — Emile Bergeron
– Emile Bergeron, Commented Dec 29, 2019 at 22:37

skyboyer · Accepted Answer · 2019-12-29 21:27:14Z

1

According to

[Array(3)]

your props.meals is not array of objects but array(with single element) of array of objects.

So while quickfix would be

{props.meals[0].map(meal =>

better to check why it's coming in different structure rather you expect

answered Dec 29, 2019 at 21:27

skyboyer

24k7 gold badges65 silver badges72 bronze badges

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

1 Comment

Melissa Stewart Over a year ago

console.log(props.meals[0]); gives (3) [{…}, {…}, {…}] however when I try to map meals[0] I get the following error, TypeError: Cannot read property 'map' of undefined

rehab hussien Ali · Accepted Answer · 2019-12-29 22:16:22Z

1

I would suggest the following:

In the meal list component, before mapping on the props.meal check first if props.meal is not null otherwise show a message or something
[array[3]] means that the meal has one element which is an array of 3 elements, so try to adjust the structure of the data you are sending to the meals list
try to send to the meal component a meal object rather then meal.label , meal.date and so on, this way you have completely isolated reusable components

answered Dec 29, 2019 at 22:16

rehab hussien Ali

894 bronze badges

2 Comments

Emile Bergeron Over a year ago

Your last point is rather opinionated, where both ways are equally valid depending on the use-case. In OP's code, the Meal component renders data regardless of the structure of the meal object.

rehab hussien Ali Over a year ago

yeah that's absolutely correct, I mentioned that it is only suggestion to make the meal component isolated and to make every component responsible for only one thing

Collectives™ on Stack Overflow

Mapping array to components fails in react

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related