Kyle Shevlin

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?

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.