title: printing cards with array values inside
body: <p>I have been trying to print the values of the array inside of cards, but for some reason the for loop isn't letting me print the cards</p>
  
  <pre><code>import React, { Component } from 'react';
  import * as bs from 'react-bootstrap'
  import '@fortawesome/fontawesome-free/css/all.css'
  import PRODUCTS from './products'
  import ProductCard from './product-card'
  
  
  function Center(props){
  
  
  const product = Object.values(PRODUCTS)
  product.map((product) =&gt; return(
     &lt;bs.Container fluid ClassName = "p-0"&gt;
  
       &lt;bs.Row noGutters style = {{padding: "6rem 0" }}&gt;
              &lt;bs.Col&gt;
  
  
                  for(var i= -; i&lt; product.length; i++){
  
                     &lt;ProductCard&gt;
  
  
                    &lt;/ProductCard&gt;
                  }
  
            &lt;/bs.Col&gt;
  
  
         &lt;/bs.Row&gt;
  
       &lt;/bs.Container&gt;
  
      )
  
      )
  
  
  }
  
  export default Center;
  </code></pre>
  
  <p>and here is the cards code: </p>
  
  <pre><code>import React from 'react';
  import * as bs from 'react-bootstrap';
  import { BrowserRouter  as Router , Route, Switch} from "react-router-dom";
  
  function ProductCard(props) {
  
      return (
  
  
      &lt;Card style={{ width: '18rem' }}&gt;
      &lt;Card.Img variant="top" src="holder.js/100px180" /&gt;
      &lt;Card.Body&gt;
        &lt;Card.Title&gt;Card Title&lt;/Card.Title&gt;
        &lt;Card.Text&gt;
  
        &lt;/Card.Text&gt;
        &lt;Button variant="primary"&gt;Go somewhere&lt;/Button&gt;
      &lt;/Card.Body&gt;
      &lt;/Card&gt;
    )
  
  }
  
  export default ProductCard;
  </code></pre>