State not updating with useState set method

Question

I'm trying to learn hooks and try to update the state using onMouseEnter and Leave events, but the state in isFlip.flipStat doesn't change, it used for flag to flipping the card using ReactCardFlip components. The only issues here is my state doesn't change when handleMouse function trigger, maybe anyone can help. Thanks in advance.

Here's my code :

function OurServices() {
  const [isFlip, setFlip] = useState([])
  const listServices = [
    {
      "title": "title",
      "img": "img.jpg",
      "desc": "lorem ipsum"
    }
  ]
  
  function handleMouse(key) {
    let newArr = [...isFlip]
    newArr[key].flipStat = !newArr[key].flipStat
    setFlip(newArr)
  }

  useEffect(() => {
    listServices.map((x) => (
      x.flipStat = false
    ))
    setFlip(listServices)
  })
             return (
               {isFlip.map((x, key) => (
                  <div key={key} onMouseEnter={() => handleMouse(key)} onMouseLeave={() => handleMouse(key)}>
                    <div className={styles.card} >
                      <div className={styles.card_body+" p-xl-0 p-lg-0 p-md-1 p-sm-1 p-0"}>
                        <ReactCardFlip isFlipped={x.flipStat} flipDirection="horizontal">
                          <div className="row">
                            <div className={"col-xl-12 text-center "+styles.services_ic}>
                              <img className="img-fluid" src={x.img} width="72" height="72" alt="data-science" />
                            </div>
                            <div className={"col-xl-11 mx-auto text-center mt-4 "+styles.services_desc}>{x.title}</div>
                          </div>
                          
                          <div className="row">
                            <div className={"col-xl-12 text-center "+styles.services_ic}>
                              {parse(x.desc)}
                            </div>
                          </div>
                        </ReactCardFlip>
                      </div>
                    </div>
                  </div>
                ))}
               )```

Have you checked if the handleMouse function is called at all? — Gustav P Svensson
– Gustav P Svensson, Commented Aug 24, 2021 at 10:09
@GustavPSvensson yes is called, I can log the state also but and its seems the state doesn't change — dev0910
– dev0910, Commented Aug 24, 2021 at 10:20

Md Sabbir Alam · Accepted Answer · 2021-08-24 10:42:15Z

1

The first problem is in your useEffect,

useEffect(() => {
   listServices.map((x) => (
       x.flipStat = false
   ))
   setFlip(listServices)
})

you are setting listServices as the isFlip array. But Array.map() method doesn't update the source array. You need to write like this,

useEffect(() => {
   const updatedArr = listServices.map((x) => (
       x.flipStat = false
       return x;
   ))
   setFlip(updatedArr)
})

And can you log newArr after this line let newArr = [...isFlip] and see if that array has all the items? It should help you debug the issue.

Update: Try creating new array while setting the state,

function handleMouse(key) {
   let newArr = [...isFlip]
   newArr[key].flipStat = !isFlip[key].flipStat
   setFlip([...newArr])
}

edited Aug 24, 2021 at 10:42

answered Aug 24, 2021 at 10:09

Md Sabbir Alam

5,0643 gold badges19 silver badges32 bronze badges

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

2 Comments

dev0910 Over a year ago

here's the screenshot after I log the variable ibb.co/QKkDT2m

Md Sabbir Alam Over a year ago

@dev0910, updated the answer please check.

dev0910 · Accepted Answer · 2021-08-24 10:29:14Z

0

The main problem is apparently from my code to adding flipsStat key to the listServices variable, to solving this I change the mapping way to this :

listServices.map((x) => ({
  ...x, flipStat: false
}))

Thanks for @sabbir.alam to reminds me for this.

answered Aug 24, 2021 at 10:29

dev0910

12 bronze badges

Collectives™ on Stack Overflow

State not updating with useState set method

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related