Why is the name appearing empty?

Question

I am new to React and I am trying to use state for the first time. For some reason statelist.name does not return anything. Do I need to use a constructor ? Any Help would be great.

import React from 'react';

class HorizantScroller extends React.Component {

  state = {
    statelist: [
  {name: "Brands",
    items: ["1", "2", "3"]
  },
  {name: "Films",
    items: ["f1", "f2", "f3"]
  },
  {name: "Holiday Destination",
    items: ["f1", "f2", "f3"]
  }
]

  };

  render() {
    const { selected } = this.state;
    // Create menu from items
    const menu = Menu(list, selected);
    const {statelist} = this.state;


    return (
      <div>
      <div name={statelist.name}></div>
      </div>

    );
  }
}

export default HorizantScroller;

`statelist` is an array, not an object. You have to tell it what object to access the property on. To test try `statelist[0].name`. — Brian Thompson, May 14 '20 at 20:09
ok so how about if i want to access all the names of ```statelist``` not just the first item ? — Jonathan Pein, May 14 '20 at 20:14
The [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. — Brian Thompson, May 14 '20 at 20:21
Does this answer your question? [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — Emile Bergeron, May 14 '20 at 20:31

score 2 · Answer 1 · answered May 14 '20 at 20:10

2

StateList is an array, you will need to specify the index of the state first and the get the property 'name'. Example: statelist[0].name

answered May 14 '20 at 20:10

Tomás Lopes

33
4

ok so how about if i want to access all the names of statelist not just the first item ? – Jonathan Pein May 14 '20 at 20:15
1

Then you will need to use some array iterator function like foreach or [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). This way you will loop through the array and perform the actions you need. If you want you can create a new array just with the names using const names = statelist.map(state => state.map); This way you can loop through this new array without having to worry about the properties – Tomás Lopes May 14 '20 at 20:16

score 1 · Answer 2 · answered May 14 '20 at 20:14

You could do something like this to make it dynamic:

{statelist.map((list,index)=>{
   return (
        <div key={index} name={list.name}></div>
     );
})

}

This way you would have all the values in the statelist. replace the <div name={statelist.name}></div> with the above code. Notice how i have added a key to the div. this is important for react to distinguish between the divs and also it'll complain in the console if you don't do it :).

Brian Polanco · Answer 3 · 2020-05-14T20:22:00.490

Your problem is not with the react state, is with the data types you're using. First of all statelist is not an object so you can't use statelist.name, it's an array so you need to pass an index of the position of the array you're trying to retrieve, it should be something like statelist[0].name.

If you want to access all the names of statelist not just the first item you need iterate in the array and do something like this:

{statelist.map((element,index) => (
   <div key={index} name={element.name}></div>
 )) }

score 0 · Answer 4 · answered May 14 '20 at 20:15

statelist is an array and does not have a field named name. The elements of the array has the field name. This means you have to access an element. You can do this with an index:

let index = 0;

<div name={statelist[0].name}></div>

If you want to get the names of all elements you can use the map function:

{statelist.map(element => {
  return (
    <div name={element.name}></div>
  );
})}

Why is the name appearing empty?

4 Answers4