How to display object in ReactJS

Viewed 35
const nearestLocation: {
    location: {
        lat: number;
        lng: number;
    };
    distance: number;
}

How to display object in browser React Js

output

{location: {…}, distance: 15156172.809947284}
distance: 15156172.809947284
location:
lat: -6.519093935774685
lng: 110.9042735749676
1 Answers

You can stringify the object using JSON.stringify and render it in a pre element.

function App() {
  const nearestLocation = {
    location: { lat: -6.519093935774685, lng: 110.9042735749676 },
    distance: 15156172.809947284,
  };

  return <pre>{JSON.stringify(nearestLocation, null, 2)}</pre>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>

Related