How to finish the dynamic menu on React?

Question

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" }

Igor Golovin Igor Golovin 1,242 one five 13 · Accepted Answer · 2017-07-15T21:07:12

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> ) } }

In the native JS, will it not work like that to insert an element?
@NikitaShchypylov yes, the return (...) in your question is also JSX.
That is, this record can be used wherever I want, when I need JSX?

How to finish the dynamic menu on React?

1 answer 1

More articles: