Показать / Скрыть компонент в React

Я пытаюсь вам помочь, но ваш код нуждается в дополнительном рефакторинге:)

import React from "react"
import ReactDOM from "react-dom";

class Navigation extends React.Component {
  state = {
    active: "first"
  }

  handleClickChange = e => {
    const { className } = e.target

    this.setState({ active: className})
  }

  render() {
    const { active } = this.state

    return (
      <div>
        {active === 'first' && <div>First Component</div>}

        {active === 'second' && <div>Second Component</div>}

        <ul>
          <li className="first"
            onClick={this.handleClickChange}
          >
            FIRST

        </li>
          <li
            className="second"
            onClick={this.handleClickChange}
          >
            SECOND
        </li>
          <li className="third">THIRD</li>
          <li className="fourth">FOURTH</li>
          <li className="fifth">FIFTH</li>
        </ul>

      </div>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Navigation />, rootElement);

Вам нужно передать className , чтобы указать и проверить эту переменную при рендеринге. Если у вас есть вопросы по этому коду, вы можете задать их :)