title: How to de-structure nested props?
body: <p>I started learning React js and I reached to the topic of destructuring props. Normally what we do is we destructure props and then use the attributes just like below code in Greet component</p>
  
  <pre><code>import React from "react";
  const Greet = props =&gt; {
    const { name, heroName } = props; //here I destructured it
    return (
      &lt;div&gt;
        &lt;h1&gt;
          Hello {name} a.k.a {heroName}
        &lt;/h1&gt;{" "}
        // and then use simply name and heroName
      &lt;/div&gt;
    );
  };
  export default Greet;
  </code></pre>
  
  <p>And here is my App component</p>
  
  <pre><code>import React from "react";
  import logo from "./logo.svg";
  import "./App.css";
  import Greet from "./components/Greet";
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;Greet name="kaptan" heroName=" ek" /&gt;
      &lt;/div&gt;
    );
  }
  export default App;
  </code></pre>
  
  <p>The above code works fine then I moved further and make a Person and a NameList component Below is my NameList component</p>
  
  <pre><code>import React from "react";
  import Person from "./Person";
  function NameList() {
    const persons = [
      {
        id: 1,
        name: "kaptan",
        age: 30,
        skill: "react"
      },
      {
        id: 2,
        name: "rinku",
        age: 29,
        skill: "java"
      },
      {
        id: 3,
        name: "ankit",
        age: 39,
        skill: "vue"
      }
    ];
    const personsList = persons.map(person =&gt; &lt;Person person={person} /&gt;);
    return &lt;div&gt;{personsList}&lt;/div&gt;;
  }
  export default NameList;
  </code></pre>
  
  <p>And here is my Person component</p>
  
  <pre><code>import React from "react";
  const Person = ({ person }) =&gt; {
    // here i need to destructure person object
    return (
      &lt;div&gt;
        &lt;h2&gt;
          I am {person.name},My age is {person.age},I know {person.skill}
        &lt;/h2&gt;
      &lt;/div&gt;
    );
  };
  export default Person;
  </code></pre>
  
  <p>So my question is that why in Person component I cant do destructure as I did in Greet component </p>
  
  <p>like this way</p>
  
  <pre><code>import React from "react";
  const Person = props =&gt; {
    const { name, age, skill } = props;
    return (
      &lt;div&gt;
        &lt;h2&gt;
          I am {name},My age is {age},I know {skill}
        &lt;/h2&gt;
      &lt;/div&gt;
    );
  };
  export default Person;
  </code></pre>
  
  <p>It doesn't give me correct output Why?</p>