Quiero mostrar cada clave y valor de mi objeto entrante, el objeto se llena dinámicamente, por lo que si hay un objeto en el objeto, también necesito mostrar la clave y el valor de ese objeto.
Este es el objeto por ejemplo
info:{ address:{ city: {__old: 'city1', __new: 'city2'} country: {__old: 'country1', __new: 'country2'} lineOne: {__old: 'lineOne1', __new: 'lineOne2'} }, personalId: {__old: '55555555', __new: '555555556'} }Puedes hacerlo con JSON.stringify así:
// import React from "react"; const address = { city: { __old: "city1", __new: "city2" }, country: { __old: "country1", __new: "country2" }, lineOne: { __old: "lineOne1", __new: "lineOne2" }, }; const App = () => { return <pre>{JSON.stringify(address, null, 3)}</pre>; }; // export default App; ReactDOM.render(<App />, document.getElementById('root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div> También puedes usar alguna biblioteca, como JSONTree :
import React from "react"; import JSONTree from "react-json-tree"; const address = { city: { __old: "city1", __new: "city2" }, country: { __old: "country1", __new: "country2" }, lineOne: { __old: "lineOne1", __new: "lineOne2" }, }; const App = () => { return <JSONTree data={address} />; }; export default App;