How to access nested object in ReactJS ?
To access a nested object in react we can use the dot notation. But if we want to access an object with multi-level nesting we have to use recursion to get the values out of it.
Prerequisites
Approach
The structure of an object in React JS can be nested many times and can get complicated quickly. If we want to access all the values of nested objects then we have to use recursion to access each and every level of that object.
Example of a Nested object:
let company = {
"Name": "w3wiki",
"Domain": {
"Web": "HTML, CSS, JavaScript",
"DSA": "Cpp, java",
"Data Science": "Python, R"
}
}
And it can get more complicated according to the nesting of the object. That is why we have to use recursion to get all the values and access the whole nested object.
Steps to Create React Application:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure:
Example: This example implements recursion to get the values form nested object and display then onm console window.
Javascript
// Filename - App.js import React from "react" ; class App extends React.Component { constructor(props) { super (props); this .state = { company: { name: { fullname: "w3wiki" , shortname: "GFG" , }, webURL: "w3wiki.net" , key1: { key2: { key3: { val: "Welcome to w3wiki" , }, }, }, }, }; } helper = (obj) => { const values = Object.values(obj); values.forEach((val) => val && typeof val === "object" ? this .helper(val) : this .addtoConsole(val) ); }; addtoConsole = (val) => { console.log(val); }; render() { return ( <div> <h1 style={{ color: "green" }}> w3wiki </h1> <label> Log details</label> <button onClick={() => { this .helper( this .state.company); }} > click here </button> </div> ); } } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Contact Us