React.js Nested Nav Bar
it's clear and readable but i would like to point out some things :

Avoid using functions inside Render()


  A function in the render method will be created each render which is a
  slight performance hit. t's also messy if you put them in the render, which is a much  > bigger reason


Use the child.id instead of key as index when you map through an array in render() because Index as a key is an anti-pattern.

Keep your code as DRY as possible, the initialState can be an object outside the class instead of writing it twice or more, especially if it's a big object.

Optional : use Destructuring assignment to indicate which keys you will use in the function.

const initialState = {
  selected: '',
  nestSelect: '',
  children: [],
  active: '',
}

class NestedNav extends Component {
  constructor(props) {
    super(props)
    this.state = initialState
  }

  handleClick = title =&gt; {
    this.setState({ ...initialState })
  }

  mappedChildren = (child, selectedTitle) =&gt; {
    const { nestedParentClass } = this.props
    let childElement

    if (child) {
      childElement = child.map(({ id, title, children, url }) =&gt; &lt;li
        key={id}
        id={id}
        className={nestedParentClass + (this.state.nestSelect === title ? 'nest-selected' : '')}
        url={url}&gt;&lt;Link to={'/'}&gt;{title}&lt;/Link&gt;
        {children ?
          &lt;FontAwesomeIcon
            onClick={() =&gt; this.mappedChildren(children, this.state.select)}
            className='i button'
            icon={faArrowCircleDown} /&gt; : null}
      &lt;/li&gt;)
      this.setState({
        selected: selectedTitle,
        children: childElement,
        active: 'true',
      })
    }
    return ''
  }

  navListItems = data =&gt; data.map(({ id, url, children, title, icon }) =&gt; {
    const { parentClass } = this.props
    return (&lt;li
      key={id}
      id={id}
      className={parentClass + (this.state.selected === title ? 'selected' : '')}
      url={url}&gt;&lt;i onClick={this.handleClick}&gt;{icon}&lt;/i&gt;&lt;Link to={'/'}&gt;&lt;span&gt;{title}&lt;/span&gt;&lt;/Link&gt;
      {children ?
        &lt;FontAwesomeIcon
          onClick={() =&gt; this.mappedChildren(children, title)}
          className='i button'
          icon={faArrowCircleRight} /&gt; : null}
    &lt;/li&gt;)
  });

  render() {
    const { data } = this.props
    const active = this.state.active === 'true' ? 'true' : ''

    return (
      &lt;div className={'nested-nav'}&gt;
        &lt;div className={'container-two-' + active}&gt;
          &lt;h2&gt;{this.state.selected}&lt;/h2&gt;
          {this.state.children}
        &lt;/div&gt;
        &lt;div className='container-one'&gt;{this.navListItems(data)}&lt;/div&gt;
      &lt;/div&gt;
    )
  }
}
export default NestedNav