December 27, 2019

How to Render an Object in React

Building a `Log` Component

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.

Categories
JavaScriptWeb Development
Tags
React

+0

Liked the post? Why not show it?! Stroke Kyle's ego by stroking clicking his beard. You can click up to 50 times if you really liked it.


Spot a typo? Join the contributors below and submit a PR with the fix! This entire blog is open sourced at https://github.com/kyleshevlin/blog
alexloudenjacobwsmithbryndymentJacobMGEvanseclectic-codingjhsukgcreativeerikvorhesHaroenvmarktnoonan
Newer Post: The Future of Second Career Devs
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.