Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);     });     return (       <div>         ...                 <ul>                   {items}                 </ul>          ...       </div>     );   } 

everything renders fine, however when clicking the <li> 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

like image 501
almeynman Avatar asked Oct 14 '15 05:10

almeynman


People also ask

How do you fix objects are not valid as a React child?

The React. js error "Objects are not valid as a React child" occurs when we try to directly render an object or an array in our JSX code. To solve the error, use the map() method to render arrays or access properties on the object in your JSX code.

What is invariant violation React?

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

How do you pass an array of objects into a child component in React?

To pass an array as a prop to a component in React, wrap the array in curly braces, e.g. <Books arr={['A', 'B', 'C']} /> . The child component can perform custom logic on the array or use the map() method to render the array's elements. Copied!

How do you render collection of children in React?

Rendering a Collection of Items To render a collection, iterate over each item using the . map() method and return a valid React child. It doesn't matter what is in your array as long as what you return is a primitive or any valid React child.


2 Answers

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.

like image 161
Code Commander Avatar answered Oct 15 '22 12:10

Code Commander


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()} 
like image 44
HaulinOats Avatar answered Oct 15 '22 12:10

HaulinOats