Добавлять объект в список

Как правильно добавлять объекты в список? Повесил на кнопку добавление в список значения из инпута, но добавляется только после второго нажатия. Что у меня неправильно?

const [cards, setCards] = useState([
        {
          id: Math.random().toString(),
          title: "",
          time: ""
        }
      ]);
      
    const handleAddItem = () => {
        const card = {
            id: Math.random().toString(),
            title: input,
            time: value
        };
        setCards(prevCards => [...prevCards, card])
        props.onDisplay(cards)
    };


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

Автор решения: ksa

Что у меня неправильно?

У тебя нет понимания что изменение стейта асинхронное действо. Т.е. оно произойдет не сразу, а "когда-то"...

Как получать не предыдущие значения в cards?

Например вот так

const handleAddItem = () => {
  const card = {
    id: Math.random().toString(),
    title: input,
    time: value
  };
  setCards(prevCards => {
    const a = [...prevCards, card]
    props.onDisplay(a)
    return a
  })
};
→ Ссылка