How fix this warning Array.prototype.map() expects a return value from arrow function array-callback-return?

My real problem is I have data.js file and inside this file I create a static array like this:

 const products =
    [
        {
            _id:1,
            name: 'Slim Shirt',
            category:'Shirt',
            image:'/images/d1.jpg',
            price: 60,
            rating: 4.5,
            numReviews:10
        },
        {
            _id:2,
            name: 'First Shirt',
            category:'Shirt',
            image:'/images/d1.jpg',
            price: 50,
            rating: 4.5,
            numReviews:10
        },
        {
            _id:3,            
            name: 'Best Pant',
            category:'Shirt',
            image:'/images/d1.jpg',
            price: 60,
            rating: 4,
            numReviews:5
        },
        {
            _id:4,            
            name: 'Slim Shirt',
            category:'Shirt',
            image:'/images/d1.jpg',
            price: 60,
            rating: 4.2,
            numReviews:7
        },
        {
            _id:5,            
            name: 'Slim Shirt',
            category:'Shirt',
            image:'/images/d1.jpg',
            price: 60,
            rating: 4.5,
            numReviews:10
        },
        {
            _id:6,            
            name: 'Slim Pant',
            category:'Shirt',
            image:'/images/d1.jpg',
            price: 60,
            rating: 4.5,
            numReviews:10
        },
        {
            _id:7,            
            name: 'Slim Shirt',
            category:'Shirt',
            image:'/images/d1.jpg',
            price: 60,
            rating: 4.5,
            numReviews:10
        },
        {
            _id:8,            
            name: 'Slim Shirt',
            category:'Pant',
            image:'/images/d1.jpg',
            price: 60,
            rating: 4.5,
            numReviews:10
        },
    ];


    export default products;

And I have other react component HomeScreen.js and I import my array and use it like this:

import React from 'react';
import { Link } from 'react-router-dom';
import  Products  from './../data';

function HomeScreen(props){
    console.log(Products)
    return (<ul className="products">
                {Products.map(product =>{
                    <li>
                    <div className="product">
                        <img className="product-image" src={product.image} alt="product"/>
                        <div className="product-name">
                            <Link to={'/product' + product._id}>{product.name}</Link>
                        </div>
                        <div className="product-brand">{product.brand}</div>
                        <div className="product-price">{product.price}</div>
                        <div className="product-rating">{product.rating}</div>
                    </div>
                </li>
                })}                    
                </ul>)
}
export default HomeScreen;

But, I still have this warning

warning Array.prototype.map() expects a return value from arrow function  array-callback-return

Thanks for helping me.

Map function returns an array with the results of calling a function for every array element, which means that the functions needs to return the mapped element.

In your case you can explicitly indicate a return statement as such:

{Products.map(product =>{
     return (
          <li>
                    <div className="product">
                        <img className="product-image" src={product.image} alt="product"/>
                        <div className="product-name">
                            <Link to={'/product' + product._id}>{product.name}</Link>
                        </div>
                        <div className="product-brand">{product.brand}</div>
                        <div className="product-price">{product.price}</div>
                        <div className="product-rating">{product.rating}</div>
                    </div>
        </li>
    )
                })}   

Or you can do it implicitly as such:

{Products.map(product => ( // Note that we're using parenthesis here rather than braces
                    <li>
                    <div className="product">
                        <img className="product-image" src={product.image} alt="product"/>
                        <div className="product-name">
                            <Link to={'/product' + product._id}>{product.name}</Link>
                        </div>
                        <div className="product-brand">{product.brand}</div>
                        <div className="product-price">{product.price}</div>
                        <div className="product-rating">{product.rating}</div>
                    </div>
                </li>
                ))}