javascript - Using props to toggle nav list, with nested array/object -

i have 2 components loading data. want links output this:

• group1
  linka linkb

but it's doing this

• group1
  linka
• group1
  linkb

i can understand use of maps , how returning data cant figure out how fix , keep click handler working groups.

const navlist = [   {     "groupname": "group1",     "links": [         {"name": "link0a","id": "434"},         {"name": "link0b","id": "342"}     ] }, {     "groupname": "group2",     "links": [         {"name": "link1a","id": "345"},         {"name": "link1b","id": "908"}     ]   } ]  class nav extends component {    constructor(props) {     super(props);     this.state = {       openitem: null     }      this.toggleclick = this.toggleclick.bind(this);   }    toggleclick(item, index, event) {     event.preventdefault()     if (index === this.state.openitem) {         this.setstate({openitem: null})     } else {         this.setstate({openitem: index})     }  }   render() {     return (              <ul>                 {navlist.map((section, i) => {                     const links = section.links.map((item, index) => {                         const isopen = this.state && this.state.openitem === index                          return <navitem title={section.groupname} children={item.name} onclick={this.toggleclick.bind(null, item, index)} open={isopen} />                     })                      return links                 })}             </ul>      )   } }  class navitem extends component {   render() {     const toggleclass = this.props.open ? 'is-open' : ''     return (         <li>             <h2 onclick={this.props.onclick}>{this.props.title}</h2>             <ul classname={toggleclass}>                 <li>{this.props.children}</li>             </ul>         </li>     )   } }  export default navitem 

remove {this.props.title} navlink , move in render() function posted above. otherwise, every time render navlink, title shown. don't forget move onclick handler also.

here working example based on jsfiddle: https://jsfiddle.net/lustoykov/n21lspm3/1/