How to correctly display an array with objects (from another file) on react page?

Question

I have an array with three products that I want in a separate js file:

export const products = [
                      {
                        product    : 'flash t-shirt',
                        price      :  27.50,
                        category   : 't-shirts',
                        bestSeller :  false,
                        image      : 'https://www.juniba.pk/wp-content/uploads/2018/02/the-flash-distressed-logo-t-shirt-black.png',
                        onSale     :  true
                      },
                      {
                        product    : 'batman t-shirt',
                        price      :  22.50,
                        category   : 't-shirts',
                        bestSeller :  true,
                        image      : 'https://s1.thcdn.com/productimg/1600/1600/11676326-1444552242012324.png',
                        onSale     :  false
                      },
                      {
                        product    : 'superman hat',
                        price      :  13.90,
                        category   : 'hats',
                        bestSeller :  true,
                        image      : 'https://banner2.kisspng.com/20180429/rqe/kisspng-baseball-cap-superman-logo-batman-hat-5ae5ef317f8366.9727520615250184175223.jpg',
                        onSale     :  false
                      }
   ]

Then I have a react file - currently with this code:

import React from 'react';
import {products} from './Product';

const App = function() {

    const pagedata = products.map(function(item, index){
        <p key = {index}>item.product + item.price </p>
    })

    return (
        <div className="Product">
            <header>This is a header</header>
            <div>
                <h1>All Products</h1>
                    {pagedata}
                <h1>Bestsellers</h1>
                    {pagedata}
            </div>
            <footer>This is a footer</footer>
         </div>
     );
}

export default App;

I want to display the products but it throws me an error:

Failed to compile ./src/App.js Line 7: Expected an assignment or function call and instead saw an expression no-unused-expressions

What am I missing?

Answer 1

const pagedata = products.map(function(item, index){
    <p key = {index}>item.product + item.price </p>
})

This part was wrong. The callback function of map should return the element it produces

So please try to use like this

const pagedata = products.map(function(item, index){
    return (
        <p key = {index}>{item.product + item.price} </p>
    )
})

Answer 2

You need to return the value that you want to map and also you need to fix your p content:

const pagedata = products.map(function(item, index) {
    return <p key = {index}>{item.product + item.price}</p>;
});