CODEWITHSUNDEEP
javascriptreactjsreact-hooks
dev0910
dev0910

Reputation: 1

State not updating with useState set method

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>
                ))}
               )```

Upvotes: 0

Views: 78

Answers (2)

Md Sabbir Alam
Md Sabbir Alam

Reputation: 5054

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])
}

Upvotes: 1

dev0910
dev0910

Reputation: 1

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.

Upvotes: 0

Related Questions