Here product is not showing all elements from the array. This is Home Code.
I made a schema of products now I made a reducer.js file in which I assigned products=> array now this fetch details from productAction.js everything works correctly and shows product[0] as a result but after applying map function in home.js product[1]-product[10] does not show up on screen.
import React, { Fragment, useEffect } from "react";
import { CgMouse } from "react-icons/cg";
import "./Home.css";
import ProductCard from "./ProductCard.js";
import MetaData from "../layout/MetaData";
import { clearErrors, getProduct } from "../../actions/productAction";
import { useSelector, useDispatch } from "react-redux";
import Loader from "../layout/Loader/Loader";
import { useAlert } from "react-alert";
const Home = () => {
const alert = useAlert();
const dispatch = useDispatch();
const { loading, error, products } = useSelector((state) => state.products);
useEffect(() => {
if (error) {
alert.error(error);
dispatch(clearErrors());
}
dispatch(getProduct());
}, [dispatch, error, alert]);
return (
<Fragment>
{loading ? (
<Loader />
) : (
<Fragment>
<MetaData title="eDavaa" />
<div className="banner">
<p> </p>
<h1> </h1>
<a href="#container">
<button>
Scroll <CgMouse />
</button>
</a>
</div>
<h2 className="homeHeading">Featured Products</h2>
<div className="container" id="container">
{products &&
products.map((product) => (
<ProductCard key={product._id} product={product} />
))}
</div>
</Fragment>
)}
</Fragment>
);
};
export default Home;
Here is Product Reducer Code
export const productsReducer = (state = { products: [] }, action) => {
switch (action.type) {
case ALL_PRODUCT_REQUEST:
case ADMIN_PRODUCT_REQUEST:
return {
loading: true,
products: [],
};
case ALL_PRODUCT_SUCCESS:
return {
loading: false,
products: action.payload.products,
productsCount: action.payload.productsCount,
resultPerPage: action.payload.resultPerPage,
filteredProductsCount: action.payload.filteredProductsCount,
};
case ADMIN_PRODUCT_SUCCESS:
return {
loading: false,
products: action.payload,
};
case ALL_PRODUCT_FAIL:
case ADMIN_PRODUCT_FAIL:
return {
loading: false,
error: action.payload,
};
case CLEAR_ERRORS:
return {
...state,
error: null,
};
default:
return state;
}
};
and Here is backend code ->
exports.getAllProducts = catchAsyncErrors(async (req, res) => {
const resultPerPage = 8;
const productsCount = await Product.findById(req.params.id);
const apiFeature = new ApiFeatures(Product.find(), req.query).search().filter().pagination(resultPerPage);
const products = await apiFeature.query;
res.status(200).json({
success: true,
products,
productsCount
});
})
Here is product action code
// Get All Products
export const getProduct =
(keyword = "", currentPage = 1, price = [0, 25000], category, ratings = 0) =>
async (dispatch) => {
try {
dispatch({ type: ALL_PRODUCT_REQUEST });
let link = `/api/v1/products?keyword=${keyword}&page=${currentPage}&price[gte]=${price[0]}&price[lte]=${price[1]}&ratings[gte]=${ratings}`;
if (category) {
link = `/api/v1/products?keyword=${keyword}&page=${currentPage}&price[gte]=${price[0]}&price[lte]=${price[1]}&category=${category}&ratings[gte]=${ratings}`;
}
const { data } = await axios.get(link);
dispatch({
type: ALL_PRODUCT_SUCCESS,
payload: data,
});
} catch (error) {
dispatch({
type: ALL_PRODUCT_FAIL,
payload: error.response.data.message,
});
}
};
Product Showing only one element that is product[0]? What should I Do.
I tried everything. But still no solution.