Examples of destructuring nested objects need to be corrected.

[kjbyun0]

Canvas Link

https://learning.flatironschool.com/courses/6567/pages/props-destructuring-and-default-values?module_item_id=576509

Concern

There are three code examples for Destructuring Nested Objects. In these examples, the destructured parameter's name should be the same as the key name of the prop. The followings are the three examples from the lesson.

1. function App() { const socialLinks = { github: "https://github.com/liza", linkedin: "https://www.linkedin.com/in/liza/", };

   return (

   ); }

function SocialMedia({ socialLinks }) { return (

{socialLinks.github} {socialLinks.linkedin}

); }

2. function SocialMedia({ socialLinks }) { const { github, linkedin } = socialLinks;

return (

{github} {linkedin}

); }

3. function SocialMedia({ socialLinks: { github, linkedin } }) { return (

{github} {linkedin}

); }

Additional Context

No response

Suggested Changes

I think these three examples need to be fixed as below.

1. function App() { const socialLinks = { github: "https://github.com/liza", linkedin: "https://www.linkedin.com/in/liza/", };

   return (

   ); }

function SocialMedia({ links}) { return (

{links.github} {links.linkedin}

); }

2. function SocialMedia({ links}) { const { github, linkedin } = links;

return (

{github} {linkedin}

); }

3. function SocialMedia({ links: { github, linkedin } }) { return (

{github} {linkedin}

); }

[kjbyun0]

Oh, in the above code examples, the JSX returned by the SocialMedia component is not displayed correctly. All I wanted to inform was that the destructured parameter name of SocialMedia component needed to be changed from 'socialLinks ' to 'links.' Thank you.