O desafio pedia que, ao clicar no botão “Add Item”, o campo de input fosse limpo e o primeiro item fosse adicionado à lista. Quando o segundo item fosse adicionado, ambos os itens deveriam aparecer, e assim por diante.

A solução implementada foi a seguinte:

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

  const handleAddItem = () => {
    // TODO: Add logic to add input to items list
    // ir ate a lista e colocar o que ta escrito
   if(input !== ""){
    setItems(previousItems => [...previousItems, input])
      setInput("");
   }  
  };

Como os dados estavam armazenados em um estado com useState, a única forma de modificar a lista de itens é utilizando o operador spread (...), já que os estados em React são imutáveis.

Primeiro, foi feita uma verificação para garantir que o campo de input não estivesse vazio. Em seguida, a função de atualização de estado (setItems) foi chamada, recebendo o estado anterior (previousItems). Utilizei o operador spread para criar uma nova cópia da lista com todos os itens anteriores e adicionar o novo item (conteúdo do input) ao final.

Essa abordagem é necessária porque não podemos usar métodos como .push(), que modificam o array original. Em vez disso, criamos um novo array — respeitando o princípio de imutabilidade do React.