const App = () => {
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 am trying to render a component which looks like this:
Using the following component:
const Course = ({course}) => {
return(
<ul>
{course.map(c => (
<>
<li>{c.name}</li>
<ul>
{c.parts.map(p =>
<li>{p.name}: {p.exercises} {p.exercises.reduce((sum, item) => sum += item, 0))(</li>)}
</ul>
</>
))}
</ul>
)
}
However, the component does not render as it says p.exercises.reduce is not a function.
How do I render the total amount of exercises after each part?
You won't be able to reduce on a number (exercises is a number instead of an array), so you may have to change your render to something like this instead (if I'm understanding what you want to do correctly):
return(
<ul>
{course.map(c => (
<>
<li>{c.name}</li>
<ul>
{c.parts.map(p =>
<li>{p.name}: {p.exercises} {c.parts.reduce((sum, item) => sum += item.exercises, 0))(</li>)}
</ul>
</>
))}
</ul>
)
Let me know if this works!