Считается, что экземпляр функционального компонента не распознается браузером. Это почему?

Question

Я использую текстовый файл формата JSON для импорта элементов оттуда в другой js файл с помощью реакции. Я использую метод карты в JS для итерации по элементу в файле JSON. Однако продолжает появляться ошибка, что мой функциональный компонент не распознан.

import React from "react"
import products from "./vschoolProducts"
import product from "./product"

function App() {
    const listofp = products.map(function(pro){
        return <product key={pro.id} product= {pro} />
    })
  return (
    <div>
      {listofp}  
    </div>
  )
}

export default App

Есть идеи, почему он не распознан?

Answer 1

Это глупо с моей стороны, но ошибку можно решить, просто добавив первую букву компонента реакции в верхние заглавные.

Компонент product в продукте. js нужно изменить на Product. Впоследствии каждый экземпляр product необходимо заменить на Product.

Функциональные компоненты всегда должны начинаться с заглавных букв.