Как динамически добавлять и удалять элементы?

Question

[Евгений Петров]

Необходимо добавлять и удалять элементы по клике на кнопке: Есть одна большая кнопка, при клике на которую добавляется еще одна кнопка, при клике на новой кнопке, она должна себя удалить.

const SomeComponent = () => {
	const [elements, setElements] = useState([])

	const elCounts = () => {
	    console.log(elements)
	}

	const handlerNewElement = () => {

	    setElements([
	      ...elements,
	      <Button key={elements.length} id={elements.length} counts={elCounts}/>
	    ])
  }
}

const Button = ( {id, counts}) => {

  return <p key={id}>
    <button onClick={counts}>Element #{id + 1}</button>
  </p>
}

Сейчас я не могу понять: функция вывода количества элементов в стейт-массиве - одна, но при клике на новую кнопку в консоль мне выдает значение стейт-массива в момент создания данного элемента, т.е. допустим добавили три кнопки, при клике на самую последнюю, мне покажет что в стейте 2 элемента, при клике на первую покажет, что в стейте 0 элементов. Как так? Такое чувство как будто стейт закешировался. Тогда как получить доступ к актуальному стейт, чтобы я мог свободно удалить по индексу?
Ссылка на песочницу: тыц

Answer 1

[0xD34F]

function App() {
  const [ items, setItems ] = useState([]);

  const onItemClick = ({ target: { dataset: { id } } }) =>
    setItems(items.filter(n => n !== +id));

  const onAddNewClick = () =>
    setItems([ ...items, 1 + Math.max(0, ...items) ]);

  return (
    <div>
      {items.map(n => <button onClick={onItemClick} data-id={n}>#{n}</button>)}
      <button onClick={onAddNewClick}>add</button>
    </div>
  );
}

Comments

[Евгений Петров]

Вжух, мэйджик!