Why Props isn't working in nextjs-typescript?-CodePudding

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;

CodePudding user response：

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