Why props isn't working in my project. I can't figure out! Here is the three file. I am just learning typescript. But the code isn't error but still not working!
This is index.tsx file
index.tsx
const Home: NextPage = () => {
return (
<div className={styles.container}>
<Header name={"ali Ahad"} />
<PersonList Person={Person} />
</div>
)
}
export default Home
This is PersonList.tsx file
PersonList.tsx
type personType={
Person:{
name:string,
age:number,
address:string
}[];
};
const PersonList=(props: personType)=> {
return (
<>{props.Person.map((man)=>{
<div>
<h1>{man.name}</h1>
<h2>{man.age}</h2>
<h3>{man.address}</h3>
</div>
})}</>
)
}
export default PersonList
This is Data.tsx file
Data.tsx
const Person=[
{
name:"John",
age:30,
address:"New York"
},
{
name:"Ali",
age:25,
address:"New York"
},
{
name:"Ahmad",
age:20,
address:"New York"
},
]
export default Person;
You're not seeing any of the persons being displayed/rendered because you're missing an explicit return statement in your map()'s arrow function.
// returning from a block body (braces) requires an explicit `return`
return (
<>
{props.Person.map((man) => {
/* missing `return` */
<div>
<h1>{man.name}</h1>
<h2>{man.age}</h2>
<h3>{man.address}</h3>
</div>;
})}
</>
);
You would need to do something like this...
// with an explicit `return` this will work, albeit verbose
return (
<>
{props.Person.map((man) => {
/* `return` added */
return (
<div key={man.name}>
<h1>{man.name}</h1>
<h2>{man.age}</h2>
<h3>{man.address}</h3>
</div>
);
})}
</>
);
...but this would be more concise:
// removing the braces (replaced with parentheses) will make things concise
// and the `return` will be implied
return (
<>
{props.Person.map((man) => (
<div key={man.name}>
<h1>{man.name}</h1>
<h2>{man.age}</h2>
<h3>{man.address}</h3>
</div>
))}
</>
);