December 27, 2019
0 strokes bestowed

How to Render an Object in React

Building a `Log` Component

edit

The trick I'm about to show you I learned so early on in my days of learning React that it didn't dawn on me that others still don't know it. My apologies, let's fix that right now.

Have you ever made the mistake of trying to display an object in a React component?

const Component = ({ obj }) => <div>{obj}</div>

And been met with this?

Error message from attempting to render an object

Classic mistake. Don't worry, we've all made it a time or two. We can't render an object, but we can render strings. What if we turn the object into a string and render it then?

We can do that with JSON.stringify (docs). JSON.stringify takes an object and turns it into a JSON string. We can make a component that does this for us.

// I encourage you to look at the JSON.stringify docs to understand the
// `replacer` and `space` arguments
const Log = ({ value, replacer = null, space = 2 }) => (
  <pre>
    <code>{JSON.stringify(value, replacer, space)}</code>
  </pre>
)

We can now use this component anywhere we would like to display an object in our app. This is very useful for debugging apps.

{
  "name": "Kyle Shevlin",
  "age": 34,
  "location": "Portland, OR"
}

Use this whenever you'd like to display your object in the browser instead of looking at the object value in the console or the devtools.

Sharing this article on Twitter is a great way to help me out and I really appreciate the support.
+0
Liked the post? Click the beard a few times.
Tags
React
Newer Post: The Future of Second Career Devs

Let's talk some more about JavaScript, React, and software engineering.

I write a newsletter to share my thoughts and the projects I'm working on. I would love for you to join the conversation. You can unsubscribe at any time.

Just Enough Functional Programming Logo
Just Enough Functional Programming

Check out my courses!

Liked the post? You might like my video courses, too. Watch them on Podia or egghead.io.
View on PodiaView on egghead.io
Kyle Shevlin's face, which is mostly a beard with eyes
Kyle Shevlin is a front end web developer and software engineer who specializes in JavaScript and React.