Uncaught TypeError: Cannot read property 'map' of undefined - React js

Question

I'm trying to set the new state with setState({index: index }) by passing the index but I got the following error

"Uncaught TypeError: Cannot read property 'map' of undefined" I'm using react hooks and also I'm using an arrow function, I do not really understand what's going on...

Any suggestion on how to fix this issue?

import { useState } from "react";
import "./App.css";

const App = () => {
  const [state, setState] = useState({
    products: [
      {
        _id: "1",
        title: "Shoes",
        src: [
          "https://www.upsieutoc.com/images/2020/01/07/img2.png",
          "https://www.upsieutoc.com/images/2020/01/07/img2.png",
        ],
     
      },
    ],
    index: 0,
  });

  const { products, index } = state;
  console.log("index", index);

  const handleTab = (index) => {
    console.log("index", index);
    setState({ index: index });
  };

  return (
    <div className="App">
      {products.map((item) => (
       <div className="details" key={item._id}>
          <div >
            <img src={item.src[index]} alt="" />
          </div>

          <div>
        
            <div className="thumb">
              {item.src.map((img, indx) => (
                <img
                  src={img}
                  alt="img"
                  key={indx}
                  onClick={() => handleTab(indx)}
                />
              ))}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default App;

setState from useState does not work the same way as the class component this.setState. You will need to specify the complete state when using setState i.e. setState({ index: index }); should be setState({ ...state, index: index }); — Jacob Smit
– Jacob Smit, Commented Jan 7, 2021 at 4:43
you are storing products as an object in state. I will suggest you to have a look on hooks. and change the handletab code it will result an error if you click on the image — Vibhav
– Vibhav, Commented Jan 7, 2021 at 4:45
@Vibhav state is destructured in the line const { products, index } = state; so state.products === products. — Jacob Smit
– Jacob Smit, Commented Jan 7, 2021 at 4:46
by saying setState({ products, index: index }); it worked! Thanks to everyone — Pep
– Pep, Commented Jan 7, 2021 at 4:47

Nghi Nguyen · Accepted Answer · 2021-01-07 04:45:05Z

2

When you setState({ index: index }) it remove the products property inside your state. Then do it instead

setState({ products, index: index })

answered Jan 7, 2021 at 4:45

Nghi Nguyen

9586 silver badges11 bronze badges

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

Comments

Ari Firmanto · Accepted Answer · 2021-01-07 04:52:17Z

1

The reason is your products state is replace by index state in handleTap function. useState will replace the current state with new state if you don't include current state.

It will be better if you separate product state and index state. For example:

const [products, setProducts] = useState([
  {
    _id: "1",
    title: "Shoes",
    src: [
      "https://www.upsieutoc.com/images/2020/01/07/img2.png",
      "https://www.upsieutoc.com/images/2020/01/07/img2.png",
    ],
 
  },
])
const [index, setIndex]= useState(0);

then in your handleTab function just call setIndex to update the Index

answered Jan 7, 2021 at 4:52

Ari Firmanto

3541 silver badge16 bronze badges

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot read property 'map' of undefined - React js

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