<div id="root"></div>

/* div[data-selected='true']:hover{
  background: red;
} */

div[data-selected='true']:after{
  background: blue;
  content: 'Data ID: ' attr(data-counter);
  position: absolute;
  top: -10px;
  left: 10px;
  color: white;
  padding: 2px;
  border: 1px solid #eee;
  opacity: 0;
  transition: 0.5s opacity;
}

div[data-selected='true']:hover:after {
  opacity: 1;
}

function App() {
  const [counter, setCounter] = React.useState(0);
  const [selected, setSelected] = React.useState(false)
  
  function clickHandler() {
    setCounter(counter+1)
    setCounter(counter+10)
    setSelected(!selected)
    console.log(counter)
  }
  
    function updateHandler() {
    setCounter((prev)=> prev+1)
    setCounter((prev)=> prev+10)
    console.log(counter)
  }
  
  return (
    <div>
      <div data-counter={counter} data-selected={selected}>Counter: {counter}</div>
      <div>
        <button onClick={clickHandler}>Batch</button>
      </div>
      <div>
        <button onClick={updateHandler}>WithFunction</button>
      </div>
      <div>
        <button onClick={()=>setCounter(0)}>clear</button>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);