Currently, I am enrolled in the fullstackopen2021 program offered by Helsinki University.
As a novice developer, I am focusing on understanding destructuring, which seems a bit complex to me at this stage.
The structure of my <App/> component is as follows:
const App = () => {
const course = 'Half stack application development',
parts = [
{
name: 'Fundamentals of React',
exercises: 10,
},
{
name: 'Using props to pass data',
exercises: 7,
},
{
name: 'State of a component',
exercises: 14,
}
];
return (
<>
<table>
<Header course={course} />
<Content parts={parts} />
<Total parts={parts} />
</table>
</>
)
}
This is how my <Content/> component looks like:
const Content = ({ parts: [part1, part2, part3] }) => {
// console.log(part1, part3, part2);
return (
<>
<thead>
<tr>
<th>Course Content</th>
<th>Exercises</th>
</tr>
</thead>
<tbody>
<Part part={part1} />
<Part part={part2} />
<Part part={part3} />
</tbody>
</>
)
}
Lastly, here is my <Part/> component's structure:
const Part = ({ part: { name, exercises } }) => {
return (
<>
<tr>
<th scope={"row"}>{name}</th>
<td align={"right"}>{exercises}</td>
</tr>
</>
)
}
I have successfully implemented destructuring in the <Content/> component. However, when I try using curly braces instead like this:
const Content = ({ parts: {part1, part2, part3} }) => {
//same as above
}
By employing {} curly brackets as shown in { parts: {part1, part2, part3}, it causes the application to malfunction. I am perplexed as to why this method fails while the initial implementation succeeds. Can anyone explain why this approach is incorrect and why the former one works?