Techiio-author
Started by Pritam DharApr 14, 2022

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

5 VIEWES 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 5 VIEWES SHARE

Why props isn't working on my project. I can't figure it out! Here are the three files. I am just learning typescript. But the code isn't an 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;

1 Replies

Techiio-commentatorHarry Lian replied 4 months ago1 likes0 dislikes

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>
    ))}
  </>
);
You must be Logged in to reply
Trending Technologies
15
Software91
DevOps48
Frontend Development24
Backend Development20
Server Administration17
Linux Administration28
Data Center24
Sentry24
Terraform23
Ansible83
Docker70
Penetration Testing16
Kubernetes21
NGINX20
JenkinsX17
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance