const course = [{
id: 1,
name: 'Half Stack application development',
parts: [
{
name: 'Fundamentals of React',
exercises: 10,
id: 1
},
{
name: 'Using props to pass data',
exercises: 7,
id: 2
},
{
name: 'State of a component',
exercises: 14,
id: 3
}
]
},
{
name: 'Node.js',
id: 2,
parts: [
{
name: 'Routing',
exercises: 3,
id: 1
},
{
name: 'Middlewares',
exercises: 7,
id: 2
}
]
}
]
I have found it is easy to map the names "Half Stack Application Development" and "Node.js" and displaying them by doing:
{course.map(c => <li>{c.name}</li>)}
However, course.parts.map(c => <li>{c.name}</li>) returns undefined.
How would you map it so it looks like
Half Stack Application Development
Node.js
Why does course.parts.map(p => p.name) return undefined and how can you access the names in the parts array?
Presented below is a working demo using stack-snippets and ReactJS (v 16.8.0) that achieves the desired target.
const Thingy = ({courses, ...props}) => {
return (
<div>
{courses.map(c => ( // iterate over the "courses" array
<div>
<h4>{c.name}</h4>
{c.parts.map(p => ( // now, for each "course", iterate over "parts" array
<li>{p.name}</li>
))}
</div>
))}
</div>
);
};
const course = [{
id: 1,
name: 'Half Stack application development',
parts: [
{
name: 'Fundamentals of React',
exercises: 10,
id: 1
},
{
name: 'Using props to pass data',
exercises: 7,
id: 2
},
{
name: 'State of a component',
exercises: 14,
id: 3
}
]
},
{
name: 'Node.js',
id: 2,
parts: [
{
name: 'Routing',
exercises: 3,
id: 1
},
{
name: 'Middlewares',
exercises: 7,
id: 2
}
]
}
]
ReactDOM.render(
<div>
DEMO
<Thingy courses={course} />
</div>,
document.getElementById("rd")
);<div id="rd" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>Explanation
Inline comments added to the snippet above.
course and parts both are arrays, so you cannot get course.parts directly. You can do double map for the renderings like below
{course.map(c => <>
<p>{c.name}</p>
<ul>
{c.parts.map(part => <li>{part.name}</li>)}
</ul>
</>)}
You would need to do a map within a map.
This should work:
<ul>
{course.map(c => (
<>
<li>{c.name}</li>
<ul>
{c.parts.map(p =>
<li>{p.name}</li>)}
</ul>
</>
))}
</ul>