title: Invariant Violation: Objects are not valid as a React child
body: <p>In my component's render function I have:</p>
  
  <pre><code>render() {
      const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) =&gt; {
        return (&lt;li onClick={this.onItemClick.bind(this, item)} key={item}&gt;{item}&lt;/li&gt;);
      });
      return (
        &lt;div&gt;
          ...
                  &lt;ul&gt;
                    {items}
                  &lt;/ul&gt;
           ...
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>everything renders fine, however when clicking the <code>&lt;li&gt;</code> element I receive the following error:</p>
  
  <blockquote>
    <p>Uncaught Error: Invariant Violation: Objects are not valid as a React
    child (found: object with keys {dispatchConfig, dispatchMarker,
    nativeEvent, target, currentTarget, type, eventPhase, bubbles,
    cancelable, timeStamp, defaultPrevented, isTrusted, view, detail,
    screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey,
    metaKey, getModifierState, button, buttons, relatedTarget, pageX,
    pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners,
    _dispatchIDs}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from
    the React add-ons. Check the render method of <code>Welcome</code>.</p>
  </blockquote>
  
  <p>If I change to <code>this.onItemClick.bind(this, item)</code> to <code>(e) =&gt; onItemClick(e, item)</code> inside the map function everything works as expected.</p>
  
  <p>If someone could explain what I am doing wrong and explain why do I get this error, would be great</p>
  
  <p>UPDATE 1:<br>
  onItemClick function is as follows and removing this.setState results in error disappearing.</p>
  
  <pre><code>onItemClick(e, item) {
      this.setState({
        lang: item,
      });
  }
  </code></pre>
  
  <p>But I cannot remove this line as I need to update state of this component</p>