Was Rendering Arrays Of Arrays Of Objects, Keep Getting "warning: Each Child In A List Should Have A Unique "key" Prop."

I have an object that contains array of arrays. I was able to make it render the way I wanted. However, the React key is giving me trouble; throwing this 'Warning: Each child in a

Solution 1:

I think a problem is here:

constmapEverything = () => courseList.map(a =><Coursename={a.name}partsList={a.parts}id={a.id}/>)

You should try add key here:

constmapEverything = () => courseList.map(a =><Coursename={a.name}partsList={a.parts}id={a.id}key={a.id}/>)

And here too:

constpartList = () => contents.map(part =><Partname={part.name}id={part.id}exercises={part.exercises}key={part.id}
        />)

Here is a good explanation of why you need to do it this way.

Solution 2:

This is the topic of Key Props. Whenever we render an array or list in Reactjs, it expects to have a key property available.

The presence of this key property is for performance concerns, it makes it easier for Reactjs to render a list of items.

All you have to do is provide another prop to any other elements in the array. The most unique identifier you have in your course list seems to be name. So you may want to simplify your code to something like this to get yourself going:

constCourseList = () => {
  constRenderedCourses = courses.map(function(course) {
    return<CourseDetailkey={course.name}course={course} />;
  });
  return<ul>{RenderedCourses}</ul>;
};

Then once you got that working you can make the code concise how you had it with arrow function and all:

constCourseList = () => {
  constRenderedCourses = courses.map(course => (
    <CourseDetailkey={course.name}course={course} />
  ));
  return<ul>{RenderedCourses}</ul>;
};