Destructuring props in React -> need help understanding how it works in my particular case

user_14919359 0
Viewed 40

I'm doing the fullstackopen2021 curriculum put together by Helsinki University

Im a beginner developer and am trying to get comfortable with destructuring, which is a bit confusing to me.

The <App/> component looks like this

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>
        </>
    )
}

My <Content/> component looks like this

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>
        </>
    )
}

And my component looks like this

const Part = ({ part: { name, exercises } }) => {
    return (
        <>
            <tr>
                <th scope={"row"}>{name}</th>
                <td align={"right"}>{exercises}</td>
            </tr>
        </>
    )
}

I got my destructuring to work in the <Content/> component but I cant understand why it works in the way I've done it above but when I do this

const Content = ({ parts: {part1, part2, part3} }) => {
    //same as above
}

Using {} curly braces like so { parts: {part1, part2, part3} causes the app to break. Why is this incorrect? Why does the other implementation work?

react-props reactjs destructuring
1 Answers

When you destructure a property from an object you need to use curly braces, when you destructure elements from an array you need to use brackets

example

const obj = { name: 'me' }
const { name } = obj
console.log(name)

const arr = [1, 2, 3]
const [one, two, three] = arr
console.log(one, two, three)

and in your case a combination of the two

const obj = { arr: [1, 2, 3] }
// first destructure arr and then use brackets to destructure
// the elements from their indexes
const { arr: [one, two, three] } = obj
console.log(one, two, three)

You can do the same for nested properties

const obj = { firstLevel: { secondLevel: { name: 'me' } } }
const { firstLevel: { secondLevel: { name } } } = obj
console.log(name)
user_86059600
Related