Вопрос по поводу React JS. Правильно ли я использую хук useState?

Question

Нашел данное применение хука useState, кто сможет объяснить что происходит в функции handleClick

const [state, setState] = useState(-1);
    handleClick = (index) => {
        setState(index === state ? -1 : index)
    }

Answer 1

кто сможет объяснить что происходит в функции handleClick

Меняется значение стейтовой переменной state по условию index === state.

Если значения переменных index и state равны - запишется -1... В противном случае - запишется значение переменной index.

открывать и закрывать элемент аккордеона, активируется при нажатии на элемент аккордеона при помощи события onClick

Такой вот вариант могу предложить...

const data = [
  {id: 1, name: 'Первый', txt: 'Текст первого'},
  {id: 2, name: 'Второй', txt: 'Текст второго'},
]

const Item = props => {
  const o = props.data
  const cls = props.on ? 'on' : ''
  const action = _ => props.act(props.ind)
  return <li className={cls} onClick={action}>
    <p>{o.name}</p>
    <p>{o.txt}</p>
  </li>
}

const App = props => {
  const [arr, setArr] = React.useState(data)
  const [state, setState] = React.useState(-1)
  return <ul>
    {arr.map((o, i) => <Item key={o.id} data={o} ind={i} act={setState} on={state === i} />)}
  </ul>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

li > p:last-child {
  display: none;
}
li.on > p:last-child {
  display: block;
}

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

Answer 2

-1 значит акардеон закрыт полностью.

При клике сравнение: если кликнул по текущему индексу, то закрыть акардеон полностью, иначе переключить на другой элемент.

БЛОГ НА HUSL

Вопрос по поводу React JS. Правильно ли я использую хук useState?

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