React Display Nested Array Items

Question

I have data being pulled from Firebase and I am trying to display it on my react app, however, I am only able to display the "id" part on my app, I have no way of how to display the nested word array items. The firebase data connection works because I can display the ID in the react app and I can display the entire data in the console.

The Problem : I cannot display the nested items, only the "id" item displays on the react app. I am trying to display the "average_sum" number in my app.

Console log output of my data:

[{
    "id":"1573671080",
    "word": {
        "Extra_data": {
            "Average_Sum": 23.151
        },
        "User_data": {
            "Counts": [51, 19, 35, 34, 48, 38, 21, 21, 31, 28, 25, 23, 25, 17, 54, 46, 24, 19, 28, 27, 26, 25, 25, 11, 25, 34, 60, 32, 36, 11, 23, 47]
        }
    }
},
{
    "id":"1573671081",
    "word": {
        "Extra_data": {
            "Average_Sum": 19.299999
        },
        "User_data": {
            "Counts": [21, 19, 35, 34, 38, 38, 21, 21, 31, 28, 25, 23, 25, 17, 54, 46, 24, 19, 28, 27, 26, 25, 25, 11, 25, 34, 40, 32, 36, 11, 23, 47]
        }
    }
},
{
    "id":"1573671082",
    "word": {
        "Extra_data": {
            "Average_Sum": 34.12431
        },
        "User_data": {
            "Counts": [26, 49, 35, 34, 38, 38, 21, 21, 31, 28, 25, 23, 25, 17, 54, 46, 24, 19, 28, 27, 26, 25, 25, 11, 25, 34, 40, 32, 33, 11, 23, 47]
        }
    }
}]

My React Code that proper displays all the "id" values from the console log output, these id's are displayed on the react app being pulled from firebase.

import React, { Component } from "react";
import firebase from "../Firebase.js";

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
        myData: [],
    };
};

componentDidMount() {
    const wordRef = firebase.database().ref('MyDatabase');
    wordRef.on('value', (snapshot) => {
            console.log(snapshot.val());
            let words = snapshot.val();
            let newState = [];
            for (let word in words) {
                newState.push({
                    id: word,
                    word: words[word]
                })
            }
        this.setState({
            words: newState
        })
    });
  };
};
render() {
    console.log('Out Put of State Data' + JSON.stringify(this.state.words))
    return (
        <div className='App'>
            {this.state.words.map((word) => {
                return (
                    <div>
                        <h3>{word.id}</h3>
                    </div>
                )
            })}
        </div>);
    }
}

export default App;

How I've tried to display nested elements, which doesn't work:

render() {
    console.log('Out Put of State Data' + JSON.stringify(this.state.words))
    return (
        <div className='App'>
            {this.state.words.map((word) => {
                return (
                    <div>
                        <h3>{word.id} - {word.word[Extra_Data][Average_Sum]</h3>
                    </div>
                )
            })}
        </div>
    );
}

Answer 1

At the very least, your render() function has got some syntax errors. Particularly this line:

<h3>{word.id} - {word.word[Extra_Data][Average_Sum]</h3>
//                                                 ^ Didn't close your {} brackets

Also you are referencing variables named Extra_Data and Average_Sum when presumably you are trying to reference those keys.

Try either of the following instead:

• word.word.Extra_Data.Average_Sum
• word.word['Extra_Data']['Average_Sum']

Finally, your render function might look like this:

render() {
    console.log("Out Put of State Data" + JSON.stringify(this.state.words));
    return (
      <div className="App">
        {this.state.words.map(word => {
          return (
            <div>
              <h3>
                {word.id} - {word.word["Extra_Data"]["Average_Sum"]}
              </h3>
            </div>
          );
        })}
      </div>
    );
  };

Answer 2

What you're doing right here is adding the whole object again to the object key word:

newState.push({
   id: word,
   word: words[word]
})

That means that id is getting an index and word is getting the whole object. I imagine that's now what you want, but if you want to keep things like that, then the word you're looking for is in word.word.word . For example:

  render() {
    console.log('Out Put of State Data' + JSON.stringify(this.state.words))
    return (
        <div className='App'>
          {this.state.words.map((word) => {
              return (
              <div>
              <h3>{word.word.id} - {word.word.word['Extra_data']['Average_Sum']}</h3>
              </div>
              )
          })}
        </div>
    );
  }

Here's the full code if you want to play around and change the way you store that object when you receive your response from firebase:

Another way of approaching this is to change the way you add your object to your newState array to:

newState.push({
     id: words[word].id,
     word: words[word].word
});

By doing that, you can access an element of that array later in your render like:

 <h3>
   {word.id} - {word.word["Extra_data"]["Average_Sum"]}
 </h3>

Here's an example of that second approach: