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>));
Answer from WiredPrairie on Stack Overflow
🌐
Reddit
reddit.com › r/node › using json.stringify on [object object] gives "[object object]" on react
r/node on Reddit: Using JSON.stringify on [object Object] gives "[object Object]" on React
September 16, 2022 -

I am trying to pass an object data from one page to another.

I have a line of code that can pass id and I tried to use it to pass object rather than an integer id but I can't get it right.

The code for passing id from source page:

const navigate = useNavigate();
id && navigate(generatePath("/employeelistedit/:id", { id })); //sample code which works fine when used

The code for passing the object data from source page copying the format of the code above:

function sourcePage(){
const navigate = useNavigate();
var values = {id: "someData", startd: "someData", endd: "someData"}
values && navigate(generatePath("/harvestcalendarmonitoring/:values", { values }));
} //with useNavigate and generatePath

This is the code in another page which receives the data:

const { values } = useParams(); //values gives [object Object]
const x = JSON.stringify(JSON.stringify(values)) //gives "[object Object]"
const y = Object.prototype.toString.call(values) //gives [object String]

For my routing, this is how I wrote it:

<Route path="/harvestcalendarmonitoring/:values" element={< Harvestcalendarmonitoring />} /> //refers to the receiving page

I know I'm not doing it right cause I know that "[object Object]" is showing that something is wrong somewhere in my codes.

Any help and suggestions would be really much appreciated. Thank you in advance.

🌐
egghead.io
egghead.io › lessons › react-render-an-object-with-json-stringify-in-react
Render an Object with JSON.stringify in React | egghead.io
Attempting to render an object in a React component results in an error. Objects are not valid React elements, however, strings are. If we transform an object using JSON.stringify() into a string, we can render it just as we would any other string.
Published   December 28, 2019
🌐
GitHub
github.com › macklinu › react-stringify
GitHub - macklinu/react-stringify: A JSON.stringify() React component utility · GitHub
<Stringify value={{ a: 1, b: 2, c: 3 }} render={string => { return ( <div> <span>My Custom Render Function</span> <pre>{string}</pre> </div> ) }} /> // => // // <div> // <span>My Custom Render Function</span> // <pre>{ // "foo": "foo", // "bar": "bar" // }</pre> // </div> This component accepts the following props, which are simply passed through to JSON.stringify():
Author   macklinu
🌐
Stack Overflow
stackoverflow.com › questions › 70314340 › json-stringify-on-a-react-element-converts-it-to-a-javascript-object
reactjs - JSON.stringify on a react element converts it to a javascript object - Stack Overflow
import './App.css'; let testReactElement = <div> <h1>this is the title of the react element</h1> <p>This is the content of the react element</p> </div> localStorage.setItem('element',JSON.stringify(testReactElement)) function App() { return ( <div className="App"> {JSON.parse(localStorage.getItem('element'))} </div> ); } export default App; The problem is that JSON.parse() returns a javascript object the looks similar to but not the same as the react element I initially added to localStorage, and the newly returned object is missing some keys, so react doesn't recognize it as a react element, and throws the following error Error: Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner, _store}).
🌐
npm
npmjs.com › package › react-stringify
react-stringify - npm
<Stringify value={{ a: 1, b: 2, c: 3 }} render={string => { return ( <div> <span>My Custom Render Function</span> <pre>{string}</pre> </div> ) }} /> // => // // <div> // <span>My Custom Render Function</span> // <pre>{ // "foo": "foo", // "bar": "bar" // }</pre> // </div> See this CodeSandbox for an in-browser example. This component accepts the following props, which are simply passed through to JSON.stringify():
      » npm install react-stringify
    
Published   Jan 28, 2018
Version   1.0.0
Author   Macklin Underdown
🌐
Codecademy Forums
discuss.codecademy.com › frequently asked questions › react.js faq
What does JSON.stringify do? - React.js FAQ - Codecademy Forums
January 17, 2019 - Answer JSON.stringify is a method that converts a JavaScript object into a string. One use of the method is to store the object as a string in a database, and then convert back to an object when obtaining it.
🌐
W3Schools
w3schools.com › js › js_json_stringify.asp
JSON.stringify()
JSON.stringify() can not only convert objects and arrays into JSON strings, it can convert any JavaScript value into a string. ... In JSON, date objects are not allowed.
Find elsewhere
🌐
Medium
medium.com › courtly-intrepid › the-react-hook-chronicles-decoding-the-mysteries-of-json-stringify-7342916fa0a4
The React Hook Chronicles: Decoding the Mysteries of JSON.stringify | by Deepak Surya | Courtly & Intrepid | Medium
January 10, 2024 - And this reference renews every render. JSON.stringify turns all that malarkey inside your objects or arrays into a string, and strings are dead easy for React to examine for changes.
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Global_Objects › JSON › stringify
JSON.stringify() - JavaScript | MDN
If space is anything other than ... the given value, or undefined. ... A BigInt value is encountered. JSON.stringify() converts a value to the JSON notation that the value represents....
🌐
NGCC in Angular Ivy
iq.js.org › questions › react › how-to-pretty-print-json-with-react
How to pretty print JSON with React?
October 28, 2022 - To pretty print JSON with React, you can use the JSON.stringify() method and pass JSON object as the first argument, null as the second argument, and the 2 as the third argument.
🌐
DigitalOcean
digitalocean.com › community › tutorials › js-json-parse-stringify
How To Use JSON.parse() and JSON.stringify() | DigitalOcean
November 24, 2021 - let userObj = { name: "Sammy", email: "sammy@example.com", plan: "Pro" }; function replacer(key, value) { console.log(typeof value); if (key === 'email') { return undefined; } return value; } let userStrReplacer = JSON.stringify(userObj, replacer); console.log(userStrReplacer); Executing this code will produce the following output: ... The email key-value pair has been removed from the object.
🌐
GitHub
github.com › facebook › prop-types › issues › 383
Failed prop type: Converting circular structure to JSON when stringifying React jsx · Issue #383 · facebook/prop-types
March 21, 2022 - The exception is because type checkers are trying to perform JSON.stringify on the prop value but it contains the circular structured jsx · React's circular structure is expected as mentioned by Dan here: facebook/react#24360 and it is up to prop-types to handle it. ... Warning: Failed prop type: Converting circular structure to JSON --> starting at object with constructor 'HTMLDivElement' | property '__reactFiber$dhuo6horm3g' -> object with constructor 'FiberNode' --- property 'stateNode' closes the circle
Author   gurkohli
🌐
DevQA
devqa.io › pretty-print-json-react
How to Pretty Print JSON with React
To pretty print JSON with React, you can use the JSON.stringify() method. By passing a JSON object as the first argument, null as the second, and t...
🌐
DhiWise
dhiwise.com › post › step-by-step-guide-implementing-react-json-formatter
A Comprehensive Guide to React JSON Formatter
September 5, 2024 - In React, you can convert a JSON string into a JavaScript object using the JSON.parse method, and vice versa using the JSON.stringify method.
🌐
DhiWise
dhiwise.com › post › javascript-essentials-detailed-exploration-of-json-stringify
A Detailed Exploration of JSON Stringify
September 29, 2023 - If you pass a function, it takes two arguments: the key and the value being stringified. The function's return value will be used instead of the original value. If you return undefined, the property is not included in the output JSON string. In the context of React, JSON Stringify can be used ...
🌐
Reddit
reddit.com › r/reactjs › bad idea to use json.stringify for key value?
Bad idea to use JSON.stringify for key value? : r/reactjs
August 16, 2017 - It's the same stuff applied to React component keys. ... You're right. I guess I thought because at the time I had come up with this on my own that it was somehow janky. Thanks for the refactor, internet stranger! ... ^ honestly this is me too right now. I have 7 or so mapped objects and one of them uses this concept as the key but I thought it must be wrong since I didn't find it in the docs, Google, or SO
🌐
npm
npmjs.com › package › stringify-object
stringify-object - npm
Useful for when you want to get the string representation of an object in a formatted way. It also handles circular references and lets you specify quote type. ... import stringifyObject from 'stringify-object'; const object = { foo: 'bar', ...
      » npm install stringify-object
    
Published   Sep 07, 2025
Version   6.0.0
Author   Sindre Sorhus