Чтение данный объекта из json для react компанента?

Question

[AsyaL]

Добрый день, изучаю реакт и столкнулась с проблемой мапинга данных объекта.
Есть фаил json в котором аля меню, которое в одном компоненте показывает список категорий меню, а во втором компоненте показывает содержание из каждой категории. Проблема появляется с чтением данных во втором компоненте.
Как правильно прочесть данные объекта? Object.keys() не спас, вариации this.props.data.snacks. и так далее не помогли, пересмотрела кучу форумов, но не нашла способа прочесть вложенный объект. Буду признательна за совет как правильно реализовать

class ItemOfMenu extends React.Component {
	constructor (props){
		super(props);
	}
  render() {
		var ltems = this.props.data.snacks.map(function(snacks){
		return <a key={snacks.id}><li>{snacks.name}</li></a>;
  });
	return (
	<div className="menu-categor"><ul>{ltems}</ul>	</div>     
       );
  }
}

[
{
"itemmenu": "Snacks",
"snacks": [
      {
        "id": 0,
        "name": "Tina Golden"
      },
      {
        "id": 5,
        "name": "Victoria Cannon"
      },
      {
        "id": 2,
        "name": "Hernandez Joyce"
      }
    ]
},
{
"itemmenu": "Soop",
"soop": [ 
      {
        "id": 0,
        "name": "Tina Golden"
      },
      {
        "id": 1,
        "name": "Victoria Cannon"
      },
      {
        "id": 2,
        "name": "Hernandez Joyce"
      }
    ]
}
]

Comments

[Максим]

AsyaL У вас данные в массиве (предположим data), значит до них можно добраться по индексу, например:
data[0].snacks - массив snacks, это значит его уже можно перебрать map'ом или чем угодно.
data[1].soop - массив soop, аналогично

Answer 1

[Тамара Ламова]

Что-то вроде этого, но надо проверять, что конкретно вы передаёте в props:

class ItemOfMenu extends React.Component {
  constructor (props){
    super(props);
  }
  render() {
  return (
  <div className="menu-categor">
    <ul>
      {
        this.props.data.snacks.map( snacks=> <li key={snacks.id}><a>{snacks.name}</a></li> );
      }
    </ul>
  </div>     
       );
  }
}