There is such code in 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> ) } } 

I just can't figure out how to add items from menu to .navigation . This is menu.json:

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

    1 answer 1

    Standard for .. in will cope with this task.

     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> ) } } 
    • Super! menuList.push (<li> {menuName} </ li>) is JSX? In the native JS, will it not work like that to insert an element? - Nikita Shchypylov
    • @NikitaShchypylov yes, the return (...) in your question is also JSX. - Igor Golovin
    • That is, this record can be used wherever I want, when I need JSX? - Nikita Shchypylov
    • @NikitaShchypylov Yes, you can anywhere. It after compilation to turn into normal JS. - Igor Golovin
    • Got it. Thank! - Nikita Shchypylov