Rendering React Components from Array of Objects in state

Question

I have a object like this in my this.state.data :

{
  "companies": [
    {
      "id": 1,
      "description": "Fernando"
    },
    {
      "id": 2,
      "description": "Paulo"
    }
  ]
}

I get this object from a get method in a url and set him in my this.state.data. I want to render my menu with options that are the descriptions of the array, like this :

 <MenuItem value={10} >Fernando</MenuItem>
 <MenuItem value={20}>Paulo</MenuItem>

But i want to make it render dynamiclly, sometimes i will recieve a array with 10 id's and descriptions, so i need to render 10 options in the menu. I already try to map the object, but i'm still stuck at this.

PS: I'm setting the content on a state because i can change it anytime.

Possible duplicate of [How to render an array of objects in React?](https://stackoverflow.com/questions/41374572/how-to-render-an-array-of-objects-in-react) — Herohtar, Feb 21 '18 at 19:34

NiftyAsp · Answer 1 · 2018-02-21T19:33:22.307

0

Are you just wanting the description to be dynamically added?

You can do

this.state.data.companies.map(company => (
   <MenuItem key={company.id}>{company.description}</MenuItem>
))

This will return a MenuItem for each item in the array

I'm not sure what you need for the value prop but that can be dynamically changed in the same manner

edited Feb 21 '18 at 19:33

answered Feb 21 '18 at 19:32

NiftyAsp

620
4
10

i do this in the render method? – Lucio Zenir Feb 21 '18 at 19:32
You can, if you wrap it with `{ }`, or you could write a function that does it, and call the function in the render method. `{this.generateMenuItems()` – NiftyAsp Feb 21 '18 at 19:34

score 0 · Answer 2 · answered Feb 21 '18 at 20:06

Inside the render method,

{this.state.data.companies.map((company) => {
   <MenuItem id={company.id} key={company.id} description={company.description}/>
})}

Then use the company description inside the MenuItem component as this.props.description

Rendering React Components from Array of Objects in state

2 Answers2