My real problem is : i have data.js
file 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 style have this warning
warning Array.prototype.map() expects a return value from arrow function array-callback-return
Thanks to help me guys.
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>
))}
When you use {}
in an arrow function it creates a code block that expects an explicit return
statement
Just change the {}
to ()
and an implicit return occurs
{Products.map(product => (
<li>....</li>
))}
Basic example:
const arr = [1,2,3]; let res = arr.map(n => { return n*2}) console.log('explicit return', res) res = arr.map(n => (n*2)) console.log('implicit return', res)
To return a value with arrow functions you have 2 options:
In your case you added an additional accolade so you need to specify the returned value with the key word return. But, I do recommend just returning the value directly:
{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>)
)}
Return the value from your map arrow function
{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>
)
})}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.