Invariant Violation: Objects are not valid as a React child

by

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.

More Related Contents:

  1. React won’t load local images
  2. React / JSX Dynamic Component Name
  3. How can I use multiple refs for an array of elements with hooks?
  4. console log the state after using useState doesn’t return the current value [duplicate]
  5. How do I render components with different layouts/elements using react-router-dom v6
  6. Rendering React Components from Array of Objects
  7. ESLint Parsing error: Unexpected token
  8. How to perform debounce?
  9. How to add custom html attributes in JSX
  10. Use Async/Await with Axios in React.js
  11. How to prevent re-rendering of components that have not changed?
  12. In ReactJS, why does `setState` behave differently when called synchronously?
  13. React.js ES6 avoid binding ‘this’ to every method
  14. Adding a new line in a JSX string inside a paragraph – React
  15. Save data in a special order when click on button
  16. Axios posting params not read by $_POST
  17. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  18. React.js Serverside rendering and Event Handlers
  19. React, losing saved data in localStorage with useEffect after page refresh
  20. es6 – import all named module without alias
  21. Detect change in query param react-router-dom v4.x and re-render component
  22. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  23. How to set initial state for useState Hook in jest and enzyme?
  24. Webpack 5 – Uncaught ReferenceError: process is not defined
  25. Using document.querySelector in React? Should I use refs instead? How?
  26. How to render element on click of button: ReactJS
  27. useState hook, setState function. Accessing previous state value
  28. Why is my webpack bundle.js and vendor.bundle.js so incredibly big?
  29. ReactJS bind(this)
  30. React-native view auto width by text inside

Leave a Comment