Mapping nested arrays in React

Question

I am learning React.js and Redux. I've nested arrays in arrays and mapped them in a table. The code works fine but I want to know if it's good practice or not. Thanks in advance.

return this.props.foodWeekPlan.map((course, i) => {
  return (
    <tr key={i}>
      {course.map((meal, j) => (
        <td key={j}>
          {meal.map((ingredients, k) => (
            <p key={k}>{ingredients}</p>
          ))}
        </td>
      ))}
    </tr>
  );
});

};

anerco · Accepted Answer · 2019-10-27 11:05:21Z

1

If you want a good practice, try writing a component for each object you mapping then, your code will look something like this:

  return this.props.foodWeekPlan.map((course, i) => <Course key={i} meals={course.meals}/>);

answered Oct 27, 2019 at 11:05

anerco

1071 silver badge4 bronze badges

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

Collectives™ on Stack Overflow

Mapping nested arrays in React

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