'Product' s defined but never used in react?

Question

I am trying to use a higher order function to get information from another file. I have three files that i use. My SchoolProduct.js file which is an array with objects, Second is my Product.js component. This file i am using for Props. Third file App.js where the magic should happen. I keep getting an error. 'product' is defined but never used. I know well what it means but i keep looking into my code without any luck. I want to display all the object elements to the screen, its very simple. heres my code.

App.js file

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 file

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

A good tip to avoid this kind of problems is to [`camelCase` variables and `PascalCase` components (and usually type constructors)](https://stackoverflow.com/q/1008230/1218980) — Emile Bergeron, Jan 06 '20 at 02:13

score 3 · Answer 1 · answered Jan 06 '20 at 01:00

3

You're using the same variable name in different scopes - the Product on the top level is the React component, but the SchoolProducts contains the array of objects, so with SchoolProducts.map(Product =>, inside that .map, Product refers to a plain object.

Use different variable names:

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

Or destructure immediately:

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

(you can avoid making these sorts of mistakes by enforcing the no-shadow ESLint rule)

answered Jan 06 '20 at 01:00

CertainPerformance

356,069
52
309
320

Thank you very much. It works now. I will make sure to use different variables later on. – Jan 06 '20 at 01:04
Can you explain me why i need the product.js file then? – Jan 06 '20 at 01:08
Its just an component and nothing else can it be used to? – Jan 06 '20 at 01:08
That's where your component is defined. You need the component in order to create the `OurProducts`, and you need that for the app to render. – CertainPerformance Jan 06 '20 at 01:09
I see. One last thing. Normally it would be {props.product.name} but {props.name} does work too? In some video i see people use the function name too – Jan 06 '20 at 01:11
Oh yeah, that's an issue too. `product` isn't a property of props (if it were, you'd be passing it down like `SchoolProducts.map(SchoolProduct => `. But since the properties are *directly* on the props, the reference is an immediate child of `props`, rather than being further nested. – CertainPerformance Jan 06 '20 at 01:15
But when i want to say props.item.name then go to my App.js file and write item={SchoolProduct.name} then it says duplicate isnt aloud – Jan 06 '20 at 01:16
https://stackoverflow.com/q/42367236 It sounds like you might have accidentally written a prop twice? – CertainPerformance Jan 06 '20 at 01:22

'Product' s defined but never used in react?

1 Answers1