The structure of an object in ReactJS 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 person = {
"name": "Kapil",
"age": 27,
"vehicles": {
"car": "city 100",
"bike": "ktm-duke",
"plane": "lufthansa"
}
}
And it can get more complicated according to the nesting of the object. That why we have to use recursion to get all the values and access the whole nested object.
Creating 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: It will look like the following.
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Javascript
import React from 'react';class App extends React.Component { constructor(props) { super(props); this.state = { person: { name: { first: "Kapil", last: "Chhipa" }, age: 23, key1: { key2: { key3: { val: "Welcome to neveropen" } } } } }; } 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> <button onClick={() => { this.helper(this.state.person) }}>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:
