Как доделать динамическое меню на React?

357

17 июля 2017, 14:11

Есть такой код в Header.js :

import React from 'react';
import menuJson from './menu.json'

export class Header extends React.Component {

    render() {
        const menu = JSON.parse(menuJson);
        return (
            <ul className="navigation">
                //тут должны быть li'шки из menu
            </ul>
        )
    }
}

Никак не могу додумать, как добавить пункты из menu в .navigation. Это menu.json :

{
  "home" : "#1",
  "pricing" : "#2",
  "about us" : "#3",
  "contact" : "#4"
}

Answer 1

Стандартный for .. in справится с этой задачей.

import React from 'react';
import menuJson from './menu.json'
export class Header extends React.Component {
    render() {
        const menu = JSON.parse(menuJson);
        let menuList = []
        for (let menuName in menu) {
            menuList.push(<li>{menuName}</li>);
        }
        return (
            <ul className="navigation">
                {menuList}
            </ul>
        )
    }
}