Как заменить тут вывод данных с array на JSON?

Question

[Nikita Shchypylov]

Добрый вечер
Есть такой компонент :

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

export class Header extends React.Component {

	render() {

		const menu = ["home", "pricing", "about us"];
		// const menu = JSON.parse(menuJson);

		const navLinks = menu.map(page => {
			return (
				<a href={'/' + page}>
					{page}
				</a>
			) 
		});
		return (
			<nav>
				{navLinks}
			</nav>
		)
	}
}

Сейчас он вывод всё как нужно, но я хочу перейти на JSON, ибо там можно навешать еще много чего, но не могу понять, как сделать вывод через иттератор.
menu.json выглядит так :

{
    "home" : "#home",
    "pricing" : "#pricing",
    "about us" : "#about-us"
}

Answer 1

[Роман Александрович]

Вот маленький скриптик обхода объекта
https://jsfiddle.net/f63or088/

Comments

[gleendo]

RomReed Зачем создавать новый массив, если можно просто перебрать через for in.

for (let key in Obj) {
	console.log(Obj[key]);
}

[Антон]

iamevg_: надо еще проверку на hasOwnProperty делать. Все ок. Только лучше Object.values

Answer 2

[Ваге]

class Header extends React.Component {
    render() {
        const menu = {
            home: "#home",
            pricing: "#pricing",
            "about us": "#about-us"
        };

        const navLinks = Object.keys(menu).map((key, item) => {
            return (
                <a href={"/" + menu[key]}>
                    {menu[key]}
                </a>
            );
        });
        return (
            <nav>
                {navLinks}
            </nav>
        );
    }
}

ReactDOM.render(<Header />, document.body);