.map is not a function reactjs

Question

So I'm following this tutorial, https://www.udemy.com/course/django-with-react-an-ecommerce-website/, but with some custom HTML template that I made.

I keep getting the error.map() is not defined. As the udemy course is more so for Django developers, I am a little lost of the react side.

Below is my HomeScreen.js page that is supposed to display products.

import React from 'react';
import products from '../products'

function HomeScreen() {
    return (
      <section class = "w3l-ecommerce-main">
          <div class = "ecom-contenthny py-5">
              <div class = "container py-lg-5">
                  <h3 class = "hny-title mb-0 text-center">Shop With<span>Us</span></h3>
                  <p class = "text-center">Handpicked Favourites just for you</p>
                  <div class = "ecom-products-grids row mt-lg-5 mt-3">
                { products.map(products => (
                      <div  key = {products._id} class = "col-lg-3 col-6 product-incfhny mt-4">
                          <div class = "product-grid2 transmitv">
                              <div class = "product-image2">
                                  <a href = "#">
                                      <img class = "pic-1 img-fluid" src = "/images/shop-1.jpg"/>
                                      <img class = "pic-2 img-fluid" src = "/images/shop-11.jpg"/>
                                  </a>
                                  <ul class = "social">
                                      <li><a href = "#" data-tip = "Quick View"> <span class = "fa fa-eye"></span></a></li>
                                     <li><a href = "#" data-tip = "Add to Cart"><span class = "fa fa-shooping-bag"></span></a></li>
                                  </ul>
                                  <div class = "transmitv single-item">
                                      <form action="#" method = "post">
                                          <input type="hidden" name="cmd" value="_cart">
                                    
                                          </input>
                                          <input type="hidden" name="add" value="1">
                                    
                                            </input>
                                            <input type="hidden" name="transmitv_item" value="Some Product">
                                            
                                            </input>
                                            <input type="hidden" name="amount" value="89.99">
                                            
                                            </input>

                                            <button type = "submit" class = "transmitv-cart ptransmitv-cart add-to-cart"> Add To Cart</button>

                                      </form>

                                  </div>
                              </div>
                              <div class = "product-content">
                                  <h3 class = "title"><a href = "#"> {products.name}</a></h3>
                                    <span class = "price"> 89.99 </span>
                              </div>
                          </div>
                      </div>
                      ))}
            

                  </div>
              </div>

          </div>

      </section>
    )
}

export default HomeScreen

And below is the list that I am trying to loop through titled products.js

const products = [
    {
        '_id': "1",
        'name': 'some product 1',
        'image':'/images/shop-1.jpg',
        'image2':'/images/shop-11.jpg',
        'description': 'Here is something about this product. This product can do this and that for you. I hope you like it.',
        'brand': 'some brand',
        'category': 'some category',
        'price': 59.99,
        'countInStock':10,
        'rating': 4.5,
        'numReviews': 12, 

    },
{
    '_id': "2",
    'name': 'some product 2',
    'image':'/images/shop-2.jpg',
    'image2':'/images/shop-22.jpg',
    'description': 'Here is something about this product. This product can do this and that for you. I hope you like it.',
    'brand': 'some brand',
    'category': 'some category',
    'price': 59.99,
    'countInStock':0,
    'rating': 2.5,
    'numReviews': 2, 

},
{
    '_id': "3",
    'name': 'some product 3',
    'image':'/images/shop-3.jpg',
    'image2':'/images/shop-33.jpg',
    'description': 'Here is something about this product. This product can do this and that for you. I hope you like it.',
    'brand': 'some brand',
    'category': 'some category',
    'price': 59.99,
    'countInStock':10,
    'rating': 4.5,
    'numReviews': 12, 
},
{
    '_id': "4",
    'name': 'some product 4',
    'image':'/images/shop-4.jpg',
    'image2':'/images/shop-44.jpg',
    'description': 'Here is something about this product. This product can do this and that for you. I hope you like it.',
    'brand': 'some brand',
    'category': 'some category',
    'price': 59.99,
    'countInStock':3,
    'rating': 0.5,
    'numReviews': 12, 
},
{
    '_id': "5",
    'name': 'some product 5',
    'image':'/images/shop-5.jpg',
    'image2':'/images/shop-55.jpg',
    'description': 'Here is something about this product. This product can do this and that for you. I hope you like it.',
    'brand': 'some brand',
    'category': 'some category',
    'price': 29.99,
    'countInStock':4,
    'rating': 3.5,
    'numReviews': 6, 
},
{
    '_id': "6",
    'name': 'some product 5',
    'image':'/images/shop-6.jpg',
    'image2':'/images/shop-66.jpg',
    'description': 'Here is something about this product. This product can do this and that for you. I hope you like it.',
    'brand': 'some brand',
    'category': 'some category',
    'price': 41.99,
    'countInStock':10,
    'rating': 4.5,
    'numReviews': 12, 
}
]

Any Advice?

Answer 1

You need to write export default like this. Then, you can import products

// products.js 
<your code...>

export default products

Answer 2

first export array from "../products"

export default products

one more problem in your code: wrong map():

  { products.map(products => ( 
                  <div  key = {products._id} cl ...

correct way:

  { products.map(products => 
                  <div  key = {products._id} cl ...

delete "()" after map(products