title: React onClick does not work
body: <p>I have parent component TodoItem and two children components: EditTodoItem and ShowTodoItem. I switch this children components using state edition. If it is true, EditTodoItem is shown. 
  When edition is false, ShowTodoItem is rendering. When we click on ShowTodoItem, edition should become true. But this code doesn't work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import PropTypes from 'prop-types'
  import ShowTodoItem from './TodoItem/ShowTodoItem'
  import EditTodoItem from './TodoItem/EditTodoItem'
  
  export default class TodoItem extends React.Component {
      constructor(props) {
          super(props);
          this.handleOnTodoClick = this.handleOnTodoClick.bind(this);
          this.handleOnEnterPress = this.handleOnEnterPress.bind(this);
          this.state = { edition: false };
      }
  
      handleOnTodoClick() {
          console.log('edit');
          this.setState({ edition: true });
      }
  
      handleOnEnterPress() {
          this.setState({ edition: false });
      }
  
      render() {
          if (this.state.edition) {
              return (
                  &lt;EditTodoItem item={this.props.item} onTodoChange={this.props.onTodoChange} onEnterPress={this.handleOnEnterPress} /&gt;
              );
          }
          return (
              &lt;ShowTodoItem onClick={this.handleOnTodoClick} item={this.props.item} onRemoveTodoClick={this.props.onRemoveTodoClick}  /&gt;
          );
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have no errors in browser console, but I also don't have the result of console.log('edit');</p>