Asynchron in useState

Question

My code is:

<blink>
  const [thisButtomSelected, setThisButtomSelected] = useState({
    thisVal: 1111,
    thisIndex: 1111,
  })
   const onClick = e => {  
    setThisButtomSelected({ thisVal: e.currentTarget.value, thisIndex: e.currentTarget.id });
  }

  <li id="list" key={item.id}>
    <button
      value={item.value}
      id={index}
      className={isEqual(thisButtomSelected, { thisVal: item.value, thisIndex: index }) 
        ? 'button-selected' : 'button'
      }
      onClick={onClick}
    >
      {item.displayValue}
    </button>
</li>
</blink>  

Whenever I click the button in the app it makes thisButtomSelected always equal to the previous value.

In this case, is it not possible to change the button's style to what is selected?

I can't understand where the problem is?

Answer 1

the isEqual function you are using is not the native JavaScript function to use, instead, you can import Loadash and use it to compare two objects. to use the instruction would be like:

_.isEqual(object, other);

As I have mentioned before you have to install the loadash package and import it into your JS file.