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?