How do I pass an array of data to and use it in a Typescript React component?

Question

I am new to React. I have a component that is meant to display a profile's data.

I am unsure as to how to pass that to the component. It seems to me the best way is to send it as an array. Eg:

const person = {
  name: 'Bill',
  age: 42,
  sex: 'male',
  occupation: 'driver',
};

And to output it somewhat like:

return (
  <Typography variant="h6">{person.name}</Typography>
  <Typography variant="body1">{person.age}</Typography>
  <Typography variant="body1">{person.sex}</Typography>
  <Typography variant="body1">{person.occupation}</Typography>
)

I'm just not sure how to do this and cannot find anything on Google or SO.

Would anyone be able point me in the right direction?

hm..."best way is to send it as an array."... sorry but where's the array? do you mean how to loop thought the object and render every key value pair with Typography? — Andus
– Andus, Commented May 12, 2020 at 3:38

Bassem · Accepted Answer · 2020-05-12 04:24:54Z

1

You can pass your object as a prop to your child component:

import React from "react";

const person = {
  name: 'Bill',
  age: 42,
  sex: 'male',
  occupation: 'driver',
};

// in ParentComponent.js
<ChildComponent person={person} />


// in ChildComponent.js
const ChildComponent = ({ person }) => {
 return (
  <div> // or <React.Fragment>
   <Typography variant="h6">{person.name}</Typography>
   <Typography variant="body1">{person.age}</Typography>
   <Typography variant="body1">{person.sex}</Typography>
   <Typography variant="body1">{person.occupation}</Typography>
  </div>
 )
}

edited May 12, 2020 at 4:24

answered May 12, 2020 at 3:39

Bassem

4,1804 gold badges26 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MeltingDog Over a year ago

Sorry I wasn't very clear. How to I get the props from where the component is called to where I can use them, as you have above

Bassem Over a year ago

I updated my answer, I hope that answers your question

Collectives™ on Stack Overflow

How do I pass an array of data to and use it in a Typescript React component?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related