Render an Object with JSON.stringify in React
Attempting to render an object in a React component results in an error. Objects are not valid React elements, however, strings are. If we transform an object using JSON.stringify() into a string, we can render it just as we would any other string.
We can encapsulate this concern in a React component. We can then use this component in a React app wherever we might like to display an object on the screen. This is very useful for debugging purposes when console.log or a debugger are not your best options.
Instructor: [00:00] I have a very simple React app here. I have one value, which is an object of my name, my age, my location that I'd like to display in the UI somehow. If I make the mistake, as many of us have, of accidentally trying to render this value and I save it, we're going to see that I get an error, "Objects are not valid as React child."
[00:20] We need to turn this object into something valid so that React will render it. One way we can do that is with JSON.stringify. It turns it into a string and shows it on the page. We can make this a bit nicer by adding the replacer and space arguments.
[00:35] If we change this from being a div to pre-encode elements instead -- let me do some rearranging here real quick -- we'll get it nicely formatted into our app.
[00:45] We can also take this and make it a component. I'm going to call it log. Log will take a value prop, a replacer prop, which we will default to null, and a space prop, we will default to 2, and it will return this bit of code here.
[01:02] I want to cut that out, paste it in here, replace null with replacer, and 2 with space, and then here I will call log with value set to value.
[01:14] We have the same display, but now I have a component I can reuse in my application for whenever I would like to display an object onto the screen.
[01:24] This is useful for debugging when it's easier to view the object in your browser rather than the console or even your developer tools. We can even give it a bit of a style so that it stands out a bit more in our application.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!