React - Create grid using bootstrap

Question

I am trying to create a website and trying to create a grid. As I am not good with CSS I am using bootstrap.

However I am not able to figure out how to create grid from an array of images I have such that it's reactive as well.

import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'

import React, { Component } from 'react'


export default class MoviesComponent extends Component {
    componentDidMount() {
        this.props.fetchShows()
    }
    render() {
        // console.log(this.props)
        let popular_movies = this.props.popular_movies
        // const items = popular_movies.length > 0 ? popular_movies.map((item)=> <div key={item.id}>item.title</div>) : "tt"   
        return (
            popular_movies.length > 0 ? 
            popular_movies.map((movie) => {
                return <Container className="container" key={movie.id}> 
                            <Row>
                            <Col><img src= {"http://image.tmdb.org/t/p/w185"+movie.poster_path} alt={movie.title} /></Col>
                            </Row>

                 </Container>
             })
             : <div>Loading...</div>

        )
    }
}

Answer 1

You need to wrap your mapped items in a HTML element or React Fragment. As far as Row/Col goes, it seems correct, however strongly suggest avoiding the library, its not maintained. Go for other Bootstrap based flavors.

return (
  popular_movies.length ?
    <Container className="container">
      <Row>
      {
        popular_movies.map((movie) => <Col xs={1} key={movie.id}>{movie.id}</Col>)
      }
      </Row>
    </Container>
    : <div>Loading...</div>
)