React bootstrap responsive design not work as intended with react hooks and alan AI

Question

I am a Complete beginner in react hooks started it like a few weeks ago. So I using react hooks with my react card component. basically card component is must be divide into 3 columns in one row. but there are stacked on each other vertically. Maybe my react application taking only half part of the browser's windows. I don't know why it is happening. and I am also using the alan AI button for some other stuff and it seems like my card component and button overlap.

My index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './App.css';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap-social/bootstrap-social.css';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

My App.js

import { Card ,Alert,CardImg , CardText,CardTitle,BreadcrumbItem,Breadcrumb, Row, Col,CardDeck,Jumbotron,Container} from 'reactstrap';

import  {useState, useEffect} from "react";
import alanBtn from '@alan-ai/alan-sdk-web'
import { Grid } from '@material-ui/core';
import { menuItems } from './shared/Myitems.js';
import CardJS from './CardJS.js'


function RenderMenuItem({product})
{
return (
  <Container>
    
    <Row xs="2">

    <Col>
      <CardDeck style={{display: 'flex', flexDirection: 'col'}} >
 
          <CardJS product={product}/>
       
     
      
 
     </CardDeck>
  </Col>
  </Row>
  </Container>
 
 
);
}




function App() {
  const [products, setProducts] = useState([])
  const [cart, setCart] = useState([])
  
 
  

  useEffect(() => {
    alanBtn({
      top:"15px",
      left:"15px",
      key:
        "cae166fc0c628179186385ada308798d2e956eca572e1d8b807a3e2338fdd0dc/stage",
      onCommand: (commandData) => {
        if (commandData.command === "getMenu") {
          setProducts(commandData.data)
          console.log(commandData)
         }
         else if (commandData.command === "addToCart") {
          setCart((currentCart) => [...currentCart, commandData.data])
         }
      },
    })
}, [])

return (


 
  <div className="App ">

   
    {products.map((product) => (
      
              <div  key={product.name}  >
    
                   <RenderMenuItem  product={product} />
                    
                </div>
       
    

    ))}
    Cart:
    {cart.map((cartItem) => (
      <div key={cartItem.name}>
        {cartItem.name} - {cartItem.price} - {cartItem.category}
      </div>
    ))}
  </div>
)



  
}

export default App;

my CardJS.js

import { Card ,Alert,CardImg , CardText,CardTitle,BreadcrumbItem,Breadcrumb, Row, Col,CardDeck,Jumbotron,Container} from 'reactstrap';

import  {useState, useEffect} from "react";
import alanBtn from '@alan-ai/alan-sdk-web'
import { Grid } from '@material-ui/core';
import { menuItems } from './shared/Myitems.js';

export default function  CardJS({product})
{
    return (
<>


        <Card className="col-12 col-md-4">
        <CardImg width="100%"  src={product.src} alt={product.name} className="img-thumbnail" />
        <br />
       <CardTitle><p className="center">{product.price}</p></CardTitle>
       <CardText>  {product.name}</CardText>
       <CardText> {product.category}</CardText>
   
      </Card> 

</>

    );
}

and I have installed all necessary dependencies.

yarn add bootstrap
yarn add reactstrap

Bootstrap dependency is added and it shows in the code If anything wrong let me know..!!! any help will be appreciated.

Answer 1

you have too many containers inside the map() function... instead put the row outside the list, and wrap the col at the top level:

div className="App ">
<Container>
<Row xs="2" >
   
    {products.map((product) => (
      
              <Col  key={product.name}  >
    
                   <RenderMenuItem  product={product} />
                    
                </Col>
    ))}

</Row>

    {cart.map((cartItem) => (
      <div key={cartItem.name}>
        {cartItem.name} - {cartItem.price} - {cartItem.category}
      </div>
    ))}
</Container>
  </div>

you can get rid of the other row, container and col components inside each item