«Продукт определен, но никогда не используется в реакции?

Question

Я пытаюсь использовать функцию более высокого порядка для получения информации из другого файла. У меня есть три файла, которые я использую. Файл My SchoolProduct. js, представляющий собой массив с объектами, компонент Second is my Product. js. Этот файл я использую для Props . Третий файл приложения. js, где должны происходить маги c. Я продолжаю получать ошибку. «продукт» определен, но никогда не используется. Я хорошо знаю, что это значит, но я продолжаю изучать свой код без всякой удачи. Я хочу отобразить все элементы объекта на экране, это очень просто. вот мой код.

Приложение. js файл

import React from 'react'
import SchoolProducts from "./SchoolProducts.js"
import Product from "./component/Product.js"

function App() {
  const OurProducts = SchoolProducts.map(
    Product => <Product key={"1"} name={Product.name} description={Product.description}/>
  )

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

export default App;

Product. js файл

import React from "react"

function Product(props) {
  return (
    <div>
      <h3>{props.Product.name} </h3>
      <h3> {props.Product.price}</h3>
      <h3> {props.Product.description}</h3>
    </div>
  )
}

export default Product

SchoolProducts. js file

const SchoolProducts = [ {
    id: "1",
    name: "pencil",
    description: "Perfect for those who cant remember things"
},
{
    id: "2",
    name: "pencil",
    price: 1,
    description: "Perfect for those who cant remember things"

},
{
    id: "3",
    name: "pencil",
    price: 1,
    description: "Perfect for those who cant remember things"

},
{
    id: "4",
    name: "pencil",
    price: 1,
    description: "Perfect for those who cant remember things"

},
{
    id: "5",
    name: "pencil",
    price: 1,
    description: "Perfect for those who cant remember things"

}


]

export default SchoolProducts

Answer 1

Вы используете одно и то же имя переменной в разных областях - Product на верхнем уровне является компонентом React, но SchoolProducts содержит массив объектов, поэтому с SchoolProducts.map(Product => внутри этого .map , Product относится к обычному объекту.

Используйте разные имена переменных:

const OurProducts = SchoolProducts.map(SchoolProduct => (
  <Product key={"1"} name={SchoolProduct.name} description={SchoolProduct.description}
    />
));

Или немедленно деструктурируйте:

const OurProducts = SchoolProducts.map(({ name, description }) => (
  <Product key={"1"} name={name} description={description}
    />
));

(вы можете избежать таких сортировок ошибок путем применения правила no-shadow ESLint)