(ReactJS) Uncaught TypeError: Cannot read properties of undefined (reading 'map')

Question

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

import React, { useState } from "react";

import products from '../products'


function RecScreen() {
  const [budget, setBudget] = useState(products);
  const [items, setParts] = useState([]);

  const handleInputChange = (event) => {
    setBudget(event.target.value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();

    const response = await fetch(`/api/products?price=${budget}`);
    const data = await response.json();

    setParts(data.product);
  };
  return (
    <div>
      <h1>PC Parts Recommender</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Enter your budget:
          <input type="number" value={budget} onChange={handleInputChange} />
        </label>
        <button className='btn btn-warning rounded ms-1' type="submit">Recommend Parts</button>
      </form>
      <ul>
        {items.map(product => (
          <li key={product.id}>{product.name} - ${product.price}</li>
        ))}
      </ul>
    </div>
  );
}

export default RecScreen;

React code In this code user enter budget and recommend pc parts but its show nothing and give this Uncaught TypeError: Cannot read properties of undefined (reading 'map')

What does the JSON response look like? If the response does not contain a product key, you're setting items to undefined. — Paul M.
– Paul M., Commented Mar 19, 2023 at 17:47
What type do you see when you console.log(typeof data.product)? — Arcanus
– Arcanus, Commented Mar 19, 2023 at 17:59

Ahmed Sbai · Accepted Answer · 2023-03-19 18:13:29Z

0

Here the prolem is that the property product does not exist in the object data, however you are updating your state items with data.product which is undefined so when you try to map through items using items.map you are trying to map through an undefined value

To handle this use this code instead :

const handleSubmit = async (event) => {
  event.preventDefault();

  const response = await fetch(`/api/products?price=${budget}`);
  const data = await response.json();
  console.log(data) // see what your data object looks like
  if(data?.product){ // make this condition to only update the state when data exist and data.product exists
    setParts(data.product);
  }
};

answered Mar 19, 2023 at 18:13

Ahmed Sbai

16.5k11 gold badges34 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pinku kumar · Accepted Answer · 2023-03-21 11:40:42Z

0

If data.product has a falsy value then in that case it will throw this error,you can modify this function like this

const handleSubmit = async (event) => {
    event.preventDefault();
    const response = await fetch(`/api/products?price=${budget}`);
    const data = await response.json();
    setParts(data.product || []);
  };

answered Mar 21, 2023 at 11:40

pinku kumar

1291 silver badge1 bronze badge

Collectives™ on Stack Overflow

(ReactJS) Uncaught TypeError: Cannot read properties of undefined (reading 'map')

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related