Remove Unnecessary `Else` Blocks with Guards and Early Returns

Render an Object with JSON.stringify in React

Build a Bar Chart with SVG From Scratch with React

Kyle Shevlin's Blog Lessons

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.

Course

Kyle Shevlin's Blog Lessons

Render an Object with JSON.stringify in React

Share this video with your friends