Ошибка типа: _SchoolProduct__WEBPACK_IMPORTED_MODULE_2___default.a.map не является функцией

Question

Я новичок в ReactJs и пытаюсь выполнить задачу с канала YouTube. Я создал массив "products" в "SchoolProduct.js", затем с помощью реквизита передал значение в Product.js. Теперь в App.js я использовал функцию карты для получения данных. (Может я что-то не так понимаю в реквизите или функции карты)

Вот SchoolProduct.js:

 const products = [
 {
  id: "1",
  name: "pencil",
  price: 1,
  description: "this is pencil"
 },
 {
  id: "2",
  name: "rubber",
  price: 10,
  description: "this is rubber"
 }

]

это мой Product.js

import React from "react"
function Product(props)
{
 return
 (
    <div>
     <h2>{props.product.name}</h2>
     <p>{props.product.price.toLocaleString("en-US", {style: "currency", 
      currency: "USD"})}
     - {props.product.description}</p>
    </div>
  )

}

export default Product

и это мой App.js

import React, { Component } from 'react';
import Product from "./Product"
import productsData from "./SchoolProduct"


 function App(){

  const productsComponents = productsData.map(item => <Product product= 
   {item}/>)

  return (
   <div>
    {productsComponents}
   </div>
 )
}

export default App;

Ошибка: Ошибка типа: _SchoolProduct__WEBPACK_IMPORTED_MODULE_2___default.a.map не является функцией

показывает ошибку в строке 8 App.js, которая является "const productsComponents"

Я знаю, что совершаю глупую ошибку, но я пытаюсь ее исправить

Answer 1

Я должен экспортировать свою ошибку по умолчанию,

const products = [
 {
  id: "1",
  name: "pencil",
  price: 1,
  description: "this is pencil"
 },
 {
  id: "2",
  name: "rubber",
  price: 10,
  description: "this is rubber"
 }
]
export default products