CODEWITHSUNDEEP
javascripthtmlarraysreactjs
dutterbutter
dutterbutter

Reputation: 197

Map through an array that creates a horizontal table

I am trying to map through an array and dynamically create a horizontal table, much like the image below here.enter image description here

I am mapping through an array like so, 

 const glanceGames = this.state.gameData.map(game => {
        return <GameTable
            key={game.id}
            home_team_name={game.home_name_abbrev}
            away_team_name={game.away_name_abbrev}
            home_score={game.linescore.r.home}
            away_score={game.linescore.r.away}
            status={game.status.status}
        />
    })

and then using that data to populate the following component.

const GameTable = (props) => {
  return (
    <div>
           <table>
            <thead>
                <tr>
                    <th>{props.status}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{props.home_team_name}</td>
                    <td>{props.home_score}</td>
                </tr>
                <tr>
                    <td>{props.away_team_name}</td>
                    <td>{props.away_score}</td>
                </tr>
            </tbody>
          </table>
    </div>
)

}

However, the output is a vertical table rather than a horizontal one. I feel like this should be easy, yet I keep running into issues. Anu suggestions would be helpful! I am using React.

Upvotes: 0

Views: 1948

Answers (1)

Sivadass N
Sivadass N

Reputation: 927

I don't think this is nothing to do with react, we can just do it with css:

...

render(){
  <div style={{display: 'flex'}}>
    {glanceGames}
  </div>
}

Upvotes: 1

Related Questions