. Advertisement .
..3..
. Advertisement .
..4..
Coming across the error “Uncaught Error: Invariant Violation: Objects are not valid as a React child” can be seriously annoying when you are trying to code a solution. It is one of the most cryptic errors you can come across, and often it leads to a lot of frustration. This post is a compilation of different methods that you can follow to fix this error.
When Do You Get The Error “Uncaught Error: Invariant Violation: Objects are not valid as a React child”?
When rendering your reactjs component, you click on the li> tag and get the following error.
Your code is as follows:
<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>
This is the problem you may have.
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.
How To Handle The Error “Uncaught Error: Invariant Violation: Objects are not valid as a React child”?
Option 1: Utilize toString
The object is what you’re attempting here. You’ll have to either cite a string value in the object’s property or switch the object to a desirable string representation. JSON is another option. If you would like to see the Object’s contents, stringify it. Simply use toString ().
{this.props.task.userId.toString()}
Option 2: Utilize BreadcrumbItem
Utilizing BreadcrumbItem is a great way for you to solve the error “Uncaught Error: Invariant Violation: Objects are not valid as a React child”. In the JSX code, here is an object that should be a string value. That’s how it goes.
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
Option 3: Utilize single braces
We just got the same error, but this time it was caused by a different mistake: we utilized double braces in the following way:
{{userId}}
rather than the correct: to add the value of userId
{userId}
which the compiler supposedly converted to {{userId: userId}}, indicating that an Object was being attempted to be inserted as a React child.
Option 4: Use a primitive kinds array, such a string array:
Another way for you to resolve the error “Uncaught Error: Invariant Violation: Objects are not valid as a React child” is using a primitive kinds array, such a string array. Look at the following example:
export default function App() {
const teste = [ "A", "b", "c"]
return (
<div ClassName="App">
{teste}
</div>
);
}
// Renders Abc
React can render a collection of primitive types with ease since it knows what to render when given primitive types. But since it doesn’t allow for changing how it will be shown, it is unlikely to be used in this way. The example demonstrates how it merely concatenates each string from the array to produce the word “Abc”.
Another thing to keep in mind is that it generates the HTML seen below:
<div class="App">Abc</div>
In a practical situation, it would be preferable to handle content using the appropriate tag, for example p> for a paragraph or one of the h tags for headers. The use of several HTML tags for texts is demonstrated in this post by Flavio Copes.
Conclusion
We hope you enjoyed our article about this confusing error. With this knowledge, we know that you can fix your “Uncaught Error: Invariant Violation: Objects are not valid as a React child” problem in Windows quickly by following these steps! If you still have any other questions about fixing this syntax error, please leave a comment below. Thank you for reading!
Read more
Leave a comment