Pretty Printing JSON with React

You'll need to either insert BR tag appropriately in the resulting string, or use for example a PRE tag so that the formatting of the stringify is retained:

var data = { a: 1, b: 2 };var Hello = React.createClass({    render: function() {        return <div><pre>{JSON.stringify(data, null, 2) }</pre></div>;    }});React.render(<Hello />, document.getElementById('container'));

Working example.

Update

class PrettyPrintJson extends React.Component {    render() {         // data could be a prop for example         // const { data } = this.props;         return (<div><pre>{JSON.stringify(data, null, 2) }</pre></div>);    }}ReactDOM.render(<PrettyPrintJson/>, document.getElementById('container'));

Stateless Functional component, React .14 or higher

const PrettyPrintJson = ({data}) => {    // (destructured) data could be a prop for example    return (<div><pre>{ JSON.stringify(data, null, 2) }</pre></div>);}

Or, ...

const PrettyPrintJson = ({data}) => (<div><pre>{     JSON.stringify(data, null, 2) }</pre></div>);

Working example

Memo / 16.6+

(You might even want to use a memo, 16.6+)

const PrettyPrintJson = React.memo(({data}) => (<div><pre>{    JSON.stringify(data, null, 2) }</pre></div>));

Just to extend on the WiredPrairie's answer a little, a mini component that can be opened and closed.

Can be used like:

<Pretty data={this.state.data}/>

export default React.createClass({    style: {        backgroundColor: '#1f4662',        color: '#fff',        fontSize: '12px',    },    headerStyle: {        backgroundColor: '#193549',        padding: '5px 10px',        fontFamily: 'monospace',        color: '#ffc600',    },    preStyle: {        display: 'block',        padding: '10px 30px',        margin: '0',        overflow: 'scroll',    },    getInitialState() {        return {            show: true,        };    },    toggle() {        this.setState({            show: !this.state.show,        });    },    render() {        return (            <div style={this.style}>                <div style={this.headerStyle} onClick={ this.toggle }>                    <strong>Pretty Debug</strong>                </div>                {( this.state.show ?                    <pre style={this.preStyle}>                        {JSON.stringify(this.props.data, null, 2) }                    </pre> : false )}            </div>        );    }});

Update

A more modern approach (now that createClass is on the way out)

import styles from './DebugPrint.css'import autoBind from 'react-autobind'import classNames from 'classnames'import React from 'react'export default class DebugPrint extends React.PureComponent {  constructor(props) {    super(props)    autoBind(this)    this.state = {      show: false,    }  }      toggle() {    this.setState({      show: !this.state.show,    });  }  render() {    return (      <div style={styles.root}>        <div style={styles.header} onClick={this.toggle}>          <strong>Debug</strong>        </div>        {this.state.show           ? (            <pre style={styles.pre}>              {JSON.stringify(this.props.data, null, 2) }            </pre>          )          : null        }      </div>    )  }}

And your style file

.root { backgroundColor: '#1f4662'; color: '#fff'; fontSize: '12px';}

.header { backgroundColor: '#193549'; padding: '5px 10px'; fontFamily: 'monospace'; color: '#ffc600';}

.pre { display: 'block'; padding: '10px 30px'; margin: '0'; overflow: 'scroll';}

The 'react-json-view' provides solution rendering json string.

import ReactJson from 'react-json-view';<ReactJson src={my_important_json} theme="monokai" />