Реакция неопределенной ошибки содержимого JSX на компонент JSX внутри функции

Question

вот мой код, который должен переключаться между компонентами

class DateComponent extends Component {
  constructor () {
    super()
    this.state = {
      isHidden: true
    }
  }
  toggleHidden () {
    this.setState({
      isHidden: !this.state.isHidden
    })
  }
  render () {
    return (
      <div>
        <div>{this.state.isHidden &&  <DateNormalComponent />}</div>
        <div>{!this.state.isHidden && <DateEditComponent />}</div>
      <div>
    )
  }
}
const DateEditComponent = () => (
  <div>something editable</div>
)
const DateNormalComponent = () => (
  <div>something</div>
)

// export default DateComponent;
ReactDOM.render(
  <DateComponent />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Внутри обеих функций, где у меня есть элементы JSX, которые должны отображаться, я получаю эту ошибку на <div>something editable</div> Я следую этому уроку: https://eddyerburgh.me/toggle-visibility-with-react