React Print Pretty Object

October 21, 2019

Debugging in react is super easy. I personally use React Developer Tools.

But sometimes you might be debugging in a differnt browser, lazy, or might want objects print pretty in the view.

Here is a simple snippet of code that will help you accomplish it.

import React from 'react';
import ReactDOM from 'react-dom';

export default class PrintPrettyObject extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      exampleArray: [{
        name: 'kevin'
      }],
    };
  }

  render() {
    return (
      <pre>{JSON.stringify(this.state, null, 2)}</pre>
    )
  }
}

Search