How to a use bootstrap grid for an array created by a map method in react?

user_10444374 0
Viewed 4679

I am pulling data from an api and mapping over the JSON array to display the results, how do I use bootstrap grid to make the elements show one beside another instead of like a list?

//App.js

<div>
  <FileHeader/>
  {this.state.films.map(film=>(
    <div className="container">
      <div key={film.id} id='cardItem' className=''>
        <MovieCard film={film}/>
      </div>
    </div>               
  ))}
</div>

And this is the MovieCard Component

render() {
  var film = this.props.film;

  return(
    <div className='card' style={{width:'18rem'}}>
      <div className="card-body">
        <h5 className="card-title">{film.title}</h5>
        <h6 className='card-subtitle mb-2 text-muted'>{film.release_date}</h6>
        <p className='card-text'>{film.description}</p>
      </div>
    </div>
  )
}

How do I use the grid element to display the cards side by side?

twitter-bootstrap reactjs css
2 Answers

You should only have 1 container for your items, so get it out of the map(), then insert a row in which you'll inject the card elements. You'll have to decide how much items you want on each row. In the example below you'll have 12 items per row as a row is made of 12 columns and col-xs-1 means each item will take 1 column in the row.

You can decide it per each screen size using col-xs, col-sm etc...

<div className="container">
  <div className="row">
    {this.state.films.map(film => (
      <div key={film.id} id="cardItem" className="col-xs-1">
        <MovieCard film={film} />
      </div>
    ))}
  </div>
</div>
user_83529290

Please try this....

 <div className="container">
  <div className='row'>
    <FileHeader/>
    {this.state.films.map(film=>(
        <div key={film.id} id='cardItem' className="col-sm-3"><MovieCard film={film}/>
        </div>
    ))}
  </div>
</div>

Moviecard component... 

  render() {
    var film = this.props.film;
    return(
        <div className='card' style={{width:'18rem'}}>
          <div className="card-body">
            <h5 className="card-title">{film.title}</h5>
            <h6 className='card-subtitle mb-2 text-muted'>{film.release_date}</h6>
            <p className='card-text'>{film.description}</p>
          </div>
        </div>
    )
  }
user_78438280
Related