Как сменить данные в стейте?

Question

Нужно написать функцию, которая по id объекту и id элементу в items будет менять active. Как такую функцию написать? Вот так выглядит мой объект:

const [items, setItems] = useState([
    {
      id: 'settings',
      name: 'Settings',
      items: [
        { id: 'rest', name: '', active: false },
        { id: 'gm', name: '', active: false },
      ],
    },
  ]);

Пример использование: handleChangeActive(“settings” “rest”);

active: !!active

Answer 1

Нужно написать функцию, которая по id объекту и id элементу в items будет менять active. Как такую функцию написать?

Поскольку примера у тебя нет... Покажу как такое можно проделать на своем примере.

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
//
function Itm({data}) {
  const cls = data.active ? 'on' : null
  return <li className={cls}>
    {data.id}
  </li>
}
//
function Line({data}) {
  return <li>
    <p>{data.name}</p>
    <ol>
      {data.items.map(o => <Itm key={o.id} data={o} />)}
    </ol>
  </li>
}
//
function App() {
  const [items, setItems] = React.useState([
    {
      id: 'settings',
      name: 'Settings',
      items: [
        { id: 'rest', name: '', active: false },
        { id: 'gm', name: '', active: false },
      ],
    },
  ]);
  const act = _ => handleChangeActive('settings', 'rest')
  return <main>
    <button onClick={act}>Тест</button>
    <ul>
      {items.map(o => <Line key={o.id} data={o} />)}
    </ul>
  </main>
  //
  function handleChangeActive(id1, id2) {
    setItems(old => old.map(o => o.id === id1
      ? {...o, items: o.items.map(o => o.id === id2
          ? {...o, active: !o.active}
          : o
        )}
      : o
    ))
  }
}

.on {
  color: green;
}

<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>

БЛОГ НА HUSL

Как сменить данные в стейте?

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