fetch data inside useEffect using action in redux

Question

I am trying to fetch my data inside useEffect but every time i get an empty array when i try to send it as props to another component (Product)

ProducList.js

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { fetchProducts } from "../actions/products";
import { Product } from "./Product";

const ProductList = ({ getProducts, products, loading }) => {
  useEffect(() => {
    getProducts();
  }, []);

  return (
    <div className="p-4">
      <Product products={data} />
    </div>
  );
};

const mapStateToProps = state => ({
  products: state.products,
  loading: state.loading
});

const mapDispatchToProps = {
  getProducts: fetchProducts
};

export default connect(mapStateToProps, mapDispatchToProps)(ProductList);

and here my Product.js

import React from "react";

export const Product = props => {
  const products = props.products.map(product => {
    return (
      <div className="col-lg-4 mb-4" key={product.Id}>
        <div className="card shadow-sm">
          <img
            className="card-img-top"
            src={`/images/${product.Id}.jpg`}
            alt={product.name}
          />
          <div className="card-body">
            <h5 className="card-title">
              {product.name}{" "}
              <span className="badge badge-warning">${product.price}</span>
            </h5>
            <a href="#" className="btn btn-secondary mx-auto">
              Add to cart
            </a>
          </div>
        </div>
      </div>
    );
  });

  return <div className="row">{products}</div>;
};

i need to fetch data and send to product component

Answer 1

It looks like your data is never passed into the ProductList component (there is no reference to a data prop in ProductList).

I believe you are trying to pass the products data into the Products component. Here's what you could do.

const [newProducts, setNewPropducts] = useState([]);

//add this useEffect and keep your other one
useEffect(() => {
  //set state for products here
  setProducts(products)
}, [products]);


<Product products={newProducts} />