не магу понять как правильно добавление или удаление класса связать с state

Question

если я правильно понял любое изменение в UI должно происходит через state (изменился state, UI перерисовалось)... есть меню-бургер он меняется по клику с X на -- как тут использовать state? или тут вообще нету смысла использовать state?

const Burger = (props) => {
const [state, setState] = useState('')
const toggleHandler = (event) => {
    event.target.classList.toggle('active')
}
return (
    <div 
    className="my"
    onClick={toggleHandler}
    ></div>
)
}

вот такое решение правильно или нету смысла

const Burger = (props) => {
const [isPressed, setPressed] = useState(false)
const toggleHandler = (event) => {
    setPressed(!isPressed)
    if(isPressed){
        event.target.classList.add('active')
    }
    else{
        event.target.classList.remove('active')
    }
}
return (
    <div 
    className="my"
    onClick={toggleHandler}
    ></div>
)

}

Answer 1

Ui изменяется при изменении состояния или пропсов, для изменения классов у элемента как беспрактис можно использо библиотеку classnames. Для изменения элемента напрямую можно использовать реферансы, но не надо злоупотреблять им, подробнее можешь прочитать в дорументации. В общем для самого примитивного примера могу показать такой код на основии твоего

const Burger = () => {

  const [isPressed, setPressed] = useState(false)

  const handleToggle = () => setPressed(!isPressed)

  return (
      <button 
        className={isPressed ? 'active': ''}
        onClick={toggleHandler}
      >Button</button>
  )
  
}

БЛОГ НА HUSL

не магу понять как правильно добавление или удаление класса связать с state

Ответы (1 шт):