11

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?

1
  • What is the output that you get, because I can't see anything wrong with your code. I created a codesandbox with your code and it works so I don't know that the problem is. codesandbox.io/s/…
    – oscarteg
    Mar 8, 2020 at 17:14

3 Answers 3

24

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>
);
3
  • You don't "need" to do that. What he does is perfectly correct. Just destructure the person from the props and use the dot to get that property from the object.
    – oscarteg
    Mar 8, 2020 at 17:11
  • thanks but what is the reason for doing nested destructuring Mar 8, 2020 at 17:12
  • @KaptanBhardwaj I edited my answer to explain a bit better why nested destructuting can be used here. Mar 8, 2020 at 17:14
1

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

2
  • Yeah you can directly do it. Mar 8, 2020 at 17:13
  • @zixuan I meant in the way that OP is using in his Greet component Mar 8, 2020 at 17:14
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.