Invariant Violation: Objects are not valid as a React child

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,
    });
    }

    Related:  On - window.location.hash - Change?

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

    Solutions/Answers:

    Solution 1:

    I was having this error and it turned out to be that I was unintentionally including an Object in my JSX code that I had expected to be a string value:

    return (
        <BreadcrumbItem href={routeString}>
            {breadcrumbElement}
        </BreadcrumbItem>
    )
    

    breadcrumbElement used to be a string but due to a refactor had become an Object. Unfortunately, React’s error message didn’t do a good job in pointing me to the line where the problem existed. I had to follow my stack trace all the way back up until I recognized the “props” being passed into a component and then I found the offending code.

    You’ll need to either reference a property of the object that is a string value or convert the Object to a string representation that is desirable. One option might be JSON.stringify if you actually want to see the contents of the Object.

    Solution 2:

    So I got this error when trying to display the createdAt property which is a Date object. If you concatenate .toString() on the end like this, it will do the conversion and eliminate the error. Just posting this as a possible answer in case anyone else ran into the same problem:

    {this.props.task.createdAt.toString()}
    

    Solution 3:

    I just got the same error but due to a different mistake: I used double braces like:

    {{count}}
    

    to insert the value of count instead of the correct:

    {count}
    

    which the compiler presumably turned into {{count: count}}, i.e. trying to insert an Object as a React child.

    Solution 4:

    Just thought I would add to this as I had the same problem today, turns out that it was because I was returning just the function, when I wrapped it in a <div> tag it started working, as below

    renderGallery() {
      const gallerySection = galleries.map((gallery, i) => {
        return (
          <div>
            ...
          </div>
        );
      });
      return (
        {gallerySection}
      );
    }
    

    The above caused the error. I fixed the problem by changing the return() section to:

    return (
      <div>
        {gallerySection}
      </div>
    );
    

    …or simply:

    return gallerySection
    

    Solution 5:

    Mine had to do with unnecessarily putting curly braces around a variable holding a HTML element inside the return statement of the render() function. This made React treat it as an object rather than an element.

    render() {
      let element = (
        <div className="some-class">
          <span>Some text</span>
        </div>
      );
    
      return (
        {element}
      )
    }
    

    Once I removed the curly braces from the element, the error was gone, and the element was rendered correctly.

    Solution 6:

    Mine had to do with forgetting the curly braces around props being sent to a presentational component:

    Related:  Precise Financial Calculation in JavaScript. What Are the Gotchas?

    Before:

    const TypeAheadInput = (name, options, onChange, value, error) => {
    

    After

    const TypeAheadInput = ({name, options, onChange, value, error}) => {