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?
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>
);
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}/>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.