reactJS doesn't render the data after being fetched in useEffect hook-CodePudding

I have an API using axios which will fetch a list of products. I have called it inside useEffect() hook with [] as the second argument. I check the data before running into return command of the functional component and the data is there, but my ProductCard component are not rendered. Could you please help me with this?

FeaturedProducts.js

const FeaturedProducts = (props) => {
    const [productList, setProductList] = useState([]);
    // const productList = useSelector(productListSelector);

    useEffect(async () => {
        let rs = await fetchFeaturedProducts();
        setProductList(rs);
    }, []);

    console.log(productList);

    return (
        <div className="container-fluid pt-5">
            <div className="text-center mb-4">
                <h2 className="section-title px-5"><span className="px-2">Featured</span></h2>
            </div>
            <div className="row px-xl-5 pb-3">
                {
                    productList.map(product => {
                        <ProductCard id={product.id} name={product.name} price={product.price} img="abc"/> // need img={product.img}
                    })
                }
            </div>
        </div>
    );
}

export default FeaturedProducts;

fetchFeaturedProducts()

const fetchFeaturedProducts = async () => {
    try {
        let response = await AxiosClient.post("/product/search", {
            searchType: "desc",
            searchBy: "average_rating"
        });
        let data = response.data.data;

        return data;
    }
    catch (error) {
        raiseErrorMessages(error.response.data.errors);

        return [];
    }
}

ProductCard.js

const ProductCard = (props) => {
    const detailUrl = "/product?id="   toString(props.id);

    return (
        <div className="col-lg-3 col-md-6 col-sm-12 pb-1">
            <div className="card product-item border-0 mb-4">
                <div className="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
                    <img className="img-fluid w-100" src={props.img} alt="" />
                </div>
                <div className="card-body border-left border-right text-center p-0 pt-4 pb-3">
                    <h6 className="text-truncate mb-3">{props.name}</h6>
                    <div className="d-flex justify-content-center">
                        <h6>{props.price}</h6>
                        {/* <h6 className="text-muted ml-2"><del>{props.price}</del></h6> */}
                    </div>
                </div>
                <div className="card-footer d-flex justify-content-between bg-light border">
                    <a href={detailUrl} className="btn btn-sm text-dark p-0"><i className="fas fa-eye text-primary mr-1" />View Detail</a>
                    <a href='#' className="btn btn-sm text-dark p-0"><i className="fas fa-shopping-cart text-primary mr-1" />Add To Cart</a>
                </div>
            </div>
        </div>
    )
}

export default ProductCard;

Thank you for your precious time.

CodePudding user response：

that happens because you missed a return when you mapped your data

// .....
{
productList.map(product => {
 return (<ProductCard id={product.id} name={product.name} 
          price={product.price} img="abc"/>) // need img= 
          {product.img}
         })
}

or you can use ()

{
productList.map(product => (
 <ProductCard id={product.id} name={product.name} 
          price={product.price} img="abc"/>) // need img= 
          {product.img})        
}