React output JSON on new line

Question

I am have managed to output the JSON from an API, however it is outputted in one large block, I however wish to display each piece of json on a new line everytime there is a closing '}'.

import React, { Component } from 'react';
import './App.css';
import $ from 'jquery';

class App extends Component {

  state = {result : null}

  componentDidMount = () => {

    $.ajax({
      type: "GET",
      url: 'http://localhost:3001/data',
      data: {},
      xhrFields: {
        withCredentials: false
      },
      crossDomain: true,
      dataType: 'JSON',
      success: (result) => {
        this.setState({result : result});
      }
    });

  };

  render() {
    return (
          <div className="App">
            <header>
              <h2>Last Application Deployment </h2>
            </header>
            <div id='renderhere'>
              {JSON.stringify(this.state.result)}
            </div>
          </div>
        );
  }
    }

export default App;

Shota · Accepted Answer · 2016-10-03 10:51:58Z

4

First option: if you want to output JSON for debugging purpose, you should try react-json-pretty

Second option: if what you trying to do is supposed to be for production do something like this:

<div id='renderhere'>
  <pre>{JSON.stringify(this.state.result, null, 2)}</pre>
</div>

edited Oct 3, 2016 at 10:51

answered Oct 3, 2016 at 10:48

Shota

7,3989 gold badges40 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DaveDavidson Over a year ago

Thank you for your answer, however, I am already using JSON.stringify(), what I am trying to achieve is, instead of outputting the JSON as a whole block, I want each object in the JSON to be outputted to the browser on a new line, sorry if this wasnt clear.

Shota Over a year ago

Sorry, my code example was broken, please check the answer again.

DaveDavidson Over a year ago

That is great! Thanks.

jerryurenaa · Accepted Answer · 2020-07-28 15:16:16Z

3

try to wrap your text around this css style. and your issue will be solved. No complicated functions needed for this.

 <p style={{whiteSpace: 'pre-line'}}>my json text goes here \n\n</p>

answered Jul 28, 2020 at 15:16

jerryurenaa

4,7701 gold badge33 silver badges21 bronze badges

Collectives™ on Stack Overflow

React output JSON on new line

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related