Saturday, 9 April 2016

javascript - Invariant Violation: Objects are not valid as a React child

In my component's render function I have:



render() {
const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
return (
  • {item}
  • );
    });

    return (

    ...

      {items}

    ...

    );
    }



    everything renders fine, however when clicking the

  • element I receive the following error:




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




    If I change to this.onItemClick.bind(this, item) to (e) => onItemClick(e, item) inside the map function everything works as expected.



    If someone could explain what I am doing wrong and explain why do I get this error, would be great




    UPDATE 1:
    onItemClick function is as follows and removing this.setState results in error disappearing.



    onItemClick(e, item) {
    this.setState({
    lang: item,
    });
    }


    But I cannot remove this line as I need to update state of this component

  • No comments:

    Post a Comment

    c++ - Does curly brackets matter for empty constructor?

    Those brackets declare an empty, inline constructor. In that case, with them, the constructor does exist, it merely does nothing more than t...