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

Question

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?

Answer 1

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>

Answer 2

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>
    )
  }