React button OnHover change image inside an array

Question

I have a dynamic component that has three buttons with different images on each of them. I need to change the images on the buttons on hover. I used onMouseOver & onMouseOut. It seems to work but as soon as I hover on the button, it crashes with an error :

TypeError: btn.map is not a function.

The possibility that there maybe some minor syntactical error, but I am unable to figure it out.

Here is the working snippet for the same: https://codesandbox.io/s/frosty-wood-fzop7

Any help to rectify this is appreciated :)

@BoussadjraBrahim Yes. It worked. Can you please explain the changes to the function? — program_bumble_bee
– program_bumble_bee, Commented Aug 30, 2020 at 10:14
You are changing value of btn from an array to an object with btn property. That's why when state is updated, calling .map() on btn fails. You need to change the implementation of changeHover function so that it updates the state correctly. Demo — Yousaf
– Yousaf, Commented Aug 30, 2020 at 10:16

Boussadjra Brahim · Accepted Answer · 2020-08-30 10:26:52Z

1

Just map the btn array and return new one with hovered element that will be used to change the image src :

 const changeHover = (val, bool) => {
    setBtn(btn.map((ele, id) => id === val  ? { ...ele, hovered: bool} : ele));
  };

edited Aug 30, 2020 at 10:26

answered Aug 30, 2020 at 10:16

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

1 Comment

Yousaf Over a year ago

There's no need to return a new object when id === val is false. You can just return ele as it is. ? { ...ele, hovered: bool} : ele

Shubham Verma · Accepted Answer · 2020-08-30 10:20:50Z

1

You are doing set state wrong you need to do like this:

const changeHover = (val, bool) => {
    console.log(val)
    setBtn((prevstate) => prevstate.map((ele, id) =>
    console.log("STATES", ele) || id === val
      ? { ...ele, hovered: bool }
      : { ...ele }
  ));
  };

Here is the demo: https://codesandbox.io/s/bold-bush-w0zim

answered Aug 30, 2020 at 10:20

Shubham Verma

5,0641 gold badge12 silver badges23 bronze badges

Collectives™ on Stack Overflow

React button OnHover change image inside an array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related