Destructuring Props in React

Question

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

import React from "react";
const Greet = props => {
  const { name, heroName } = props; //here I destructured it
  return (
    <div>
      <h1>
        Hello {name} a.k.a {heroName}
      </h1>{" "}
      // and then use simply name and heroName
    </div>
  );
};
export default Greet;

And here is my App component

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Greet from "./components/Greet";
function App() {
  return (
    <div className="App">
      <Greet name="kaptan" heroName=" ek" />
    </div>
  );
}
export default App;

The above code works fine then I moved further and make a Person and a NameList component Below is my NameList component

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 => <Person person={person} />);
  return <div>{personsList}</div>;
}
export default NameList;

And here is my Person component

import React from "react";
const Person = ({ person }) => {
  // here i need to destructure person object
  return (
    <div>
      <h2>
        I am {person.name},My age is {person.age},I know {person.skill}
      </h2>
    </div>
  );
};
export default Person;

So my question is that why in Person component I cant do destructure as I did in Greet component

like this way

import React from "react";
const Person = props => {
  const { name, age, skill } = props;
  return (
    <div>
      <h2>
        I am {name},My age is {age},I know {skill}
      </h2>
    </div>
  );
};
export default Person;

It doesn't give me correct output Why?

Answer 1

You can use nested destructuring to get person properties:

const { person: { name, age, skill } } = props;

Nested destructuring is used here because props has this structure:

{
  person: {
    name: ...,
    age: ...,
    skill: ...
  }
}

Alternatively, you can just get person from props and then use its properties, similar to what you initially wrote:

const { person } = props;

return (
  <div>
     <h2>I am {person.name},My age is {person.age},I know {person.skill} </h2>
  </div>
);

Answer 2

Greet component receives name, heroName as props from the parent, so you can destructure it like you did.

<Greet name="kaptan" heroName=" ek"/>

But the Person component receives person as a prop and that contains the properties name, age, skill, etc. So you can't directly destructure it. You have to destructure the person prop

<Person person ={person}/>

Answer 3

You can either destructure the people and get their properties or do nested destructuring. Nested destructuring is easier because if you had more properties, then it would take more lines of code to get each of the properties.