In React for printing JSON in a pretty format is not that straight forward as angular. In angular, we can use JSON pipe but in React there is no any inbuild react utility we can use for printing JSON in pretty format
let’s see how we can do it
import React from "react";
import "./style.css";
export default function App() {
const obj1 = {
a:{b:{c:10}}
}
return (
<div>
<PrettyPrint jsonObj={obj1} />
</div>
);
}
function PrettyPrint(props){
return <pre>{JSON.stringify(props.jsonObj,null,2)}</pre>
}
As you can see we have created one functional component in that we are using JSON.stringify method which usually used to convert data into string format
But JSON.stringify takes some parameter for manipulating the data
want to know about JSON.stringify in detail then go through this post
Here we have given the third parameter as 2 which includes empty space in the JSON for readability purpose.
Its output will shown like
{
"a": {
"b": {
"c": 10
}
}
}
For demo,
please checkout this link