JSX组件内部函数的React，未确定的JSX内容错误

Question

这是我的代码，它假设在组件之间切换

＆＃13;

＆＃13;

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")
);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在我有两个假设要呈现的JSX元素的函数内部，我在<div>something editable</div>上得到了这个错误我遵循本教程：https://eddyerburgh.me/toggle-visibility-with-react