Dynamically mapping an array of objects to table row

Question

I'm trying to map an array of objects to table rows in React. I've tried countless suggestions on this site but nothing seems to render in the end.

I'm getting the array data from the db on componentWillMount as so:

         componentWillMount(){
         db.collection("games")
         .onSnapshot(function(querySnapshot){
             querySnapshot.forEach(function(doc){
                 games.push(doc.data())
             });
             console.log(games);
         })
      }

The data is loading properly as seen in games. games is declared as a global variable outside the react class.

So far I've tried mapping over the array like this:

renderRow = () => {
    games.map(function(val, i){
        return(
            <tr>
                <td key={i}>
                    {val.name}
                </td>
            </tr>
        )
    })
}

And then rendering it in the table like so:

            <table className="ui inverted table">
                <thead>
                    <tr>
                        <th>Lobby name</th>
                        <th>Players</th>
                        <th>Mode</th>
                        <th>Difficulty</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                   {this.renderRow()}
                </tbody>
            </table>

But nothing seems to render. I'm not sure if i'm not mapping over it properly, or perhaps it's rendering the table values before the array is loaded with data. Any thoughts on this?

Edit: console.log(games) gives this:

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
currentPlayers: 1
difficulty: ""
gameMode: "family"
host: "###########"
name: "Testing new reset"
players:
player: "###########"
__proto__: Object
timestamp: 1550704627051
__proto__: Object
1: {currentPlayers: 1, difficulty: "heroic", gameMode: "experienced", host: "", name: "Testtest", …}
2: {currentPlayers: 1, difficulty: "veteren", gameMode: "experienced", host: "", name: "Flashpoint experts only!", …}

First welcome to the community, although you've joined over a year ago. Your question was worded well and so, thank you for that. Just to let you know, you can build a working snippet using Babel, React, and JSX. — Mike
– Mike, Commented Feb 21, 2019 at 19:01
@mike means not here on Stack Overflow, but on some external site. — Roko C. Buljan
– Roko C. Buljan, Commented Feb 21, 2019 at 19:06
@RokoC.Buljan the code snippet on StackOverflow is capable of rendering React & Babel and performing the JSX transpiling. However, it may be limited to web interfaces, so if you're using a mobile device the app interface may not allow for it. Also, if browsing from a mobile browser, you may have to put it in desktop mode depending on the device. — Mike
– Mike, Commented Feb 21, 2019 at 19:13
@Mike I know, but pasting all the code here on snippets? Would be a long one, with all the data etc... But yeah, a "working" example would be easier to play with — Roko C. Buljan
– Roko C. Buljan, Commented Feb 21, 2019 at 19:16
@RokoC.Buljan yes that is true, I've used it for simple things like this where it wasn't too bad, though. Still the lengthy question/example is a real possibility. A person may have to hide it on initial load and require readers to expand it. I think having the snippet yields more participation from the community as it's easier to copy to answer than to think about about and copy/paste or type up a solution. — Mike
– Mike, Commented Feb 27, 2019 at 18:10

Hemadri Dasari · Accepted Answer · 2019-02-21 18:26:56Z

5

You are not returning anything in renderRow so need to add return before games.map

Change

   renderRow = () => {
        games.map(function(val, i){
            return(
               <tr>
                  <td key={i}>
                      {val.name}
                  </td>
               </tr>
            )
        })
   }

To

  renderRow = () => {
        return games.map(function(val, i){
            return(
               <tr>
                  <td key={i}>
                      {val.name}
                  </td>
               </tr>
            )
        })
   }

answered Feb 21, 2019 at 18:26

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sags95 Over a year ago

Thank you for the suggestion, but it still doesn't render anything, no errors in console either. I'm wondering if this is something else that's causing this now.

Hemadri Dasari Over a year ago

@sags95 can you do console.log(games) and share the output

Hemadri Dasari Over a year ago

@sags95 no do console.log in render and share the output

sags95 Over a year ago

nvm this actually did seem to fix the issue. But the rows only render when I click on a button that triggers a modal. It's an odd issue but i'll have to investigate that further.

Hemadri Dasari Over a year ago

@sags95 please upvote and accept the answer if it resolves your issue

Lazar · Accepted Answer · 2019-02-21 18:56:22Z

If the function you are calling in componentWillMount to fetch the games is asynchronous it may be that your React component renders before your data is fetched.

You should try to set the state of the component when the games array is fetched and the React will re-render the component.

eg.

class Games extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      games: []
    }
  }

  componentWillMount() {
    db.collection("games")
      .onSnapshot(function (querySnapshot) {
        let gamesArray = []
        querySnapshot.forEach(function (doc) {
          gamesArray.push(doc.data())
        });
        this.setState({ games: gamesArray })
      })
  }

  renderRow = () => {
    return this.state.games.map(function (val, i) {
      return (
        <tr>
          <td key={i}>
            {val.name}
          </td>
        </tr>
      )
    })
  }

  render() {
    return (
      <table className="ui inverted table">
        <thead>
          <tr>
            <th>Lobby name</th>
            <th>Players</th>
            <th>Mode</th>
            <th>Difficulty</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {this.renderRow()}
        </tbody>
      </table>
    )
  }
}

Collectives™ on Stack Overflow

Dynamically mapping an array of objects to table row

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related