title: How to delete an object from a list in React?
body: <p>I'm trying to make a to-do list in React which I can edit and delete the to-dos. I'm trying to use this function to delete a to-do, which worked on a past project.</p>
  <pre><code>function deleteTodo(id) {
  const updatedTodos = [...values].filter((values) =&gt; values.id !== id);
  setValues(updatedTodos);}
  </code></pre>
  <p>But I'm trying to use this code on this new project and I get the error 'values is not iterable'. I imagine its because the 'values' is an object, not an array, as you can see below...</p>
  <pre><code>    const [values, setValues] = useState({
      id: Date.now(),
      descricao: &quot;&quot;,
      atividade: &quot;&quot;,
      trabalho: true,
      pessoal: false,
    });
  </code></pre>
  <p>What is the best way I can delete to-dos like this? This is my code:</p>
  <pre><code>    export function App() {
    const [values, setValues] = useState({
      id: Date.now(),
      descricao: &quot;&quot;,
      atividade: &quot;&quot;,
      trabalho: true,
      pessoal: false,
    });
  
    const [atividades, setAtividades] = useState([]);
  
    function handleChange(event) {
      setValues({
        ...values,
        [event.target.name]: event.target.value,
        [event.target.descricao]: event.target.descricao,
      });
    }
  
    function handleSubmit(event) {
      event.preventDefault();
      setAtividades([
        ...atividades,
        {
          id: values.id,
          nome: values.atividade,
          descricao: values.descricao,
          checkTrabalho: values.trabalho,
          checkPessoal: values.pessoal,
        },
      ]);
    }
  
    function deleteTodo(id) {
      const updatedTodos = [...values].filter((values) =&gt; values.id !== id);
      setValues(updatedTodos);
    }
  
    return (
      // ==========================================================================================
      &lt;div className=&quot;App&quot;&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;input
            name=&quot;atividade&quot;
            type=&quot;text&quot;
            value={values.atividade}
            onChange={handleChange}
          /&gt;
          &lt;input
            maxLength=&quot;100&quot;
            name=&quot;descricao&quot;
            type=&quot;text&quot;
            value={values.descricao}
            onChange={handleChange}
          /&gt;
          &lt;br /&gt;
          &lt;input
            name=&quot;trabalho&quot;
            id=&quot;trabalho&quot;
            type=&quot;radio&quot;
            checked={values.trabalho}
            onChange={() =&gt; {
              setValues({ ...values, pessoal: false, trabalho: true });
            }}
          /&gt;
          &lt;label htmlFor=&quot;trabalho&quot;&gt;Trabalho&lt;/label&gt;
          &lt;input
            name=&quot;pessoal&quot;
            id=&quot;pessoal&quot;
            type=&quot;radio&quot;
            checked={values.pessoal}
            onChange={() =&gt; {
              setValues({ ...values, trabalho: false, pessoal: true });
            }}
          /&gt;
          &lt;label htmlFor=&quot;pessoal&quot;&gt;Pessoal&lt;/label&gt;
          &lt;button type=&quot;submit&quot;&gt;Criar&lt;/button&gt;
        &lt;/form&gt;
        {/* ========================================================================================== */}
  
        {/* ========================================================================================== */}
        &lt;div key={values.id}&gt;
          &lt;div&gt;
            &lt;h1&gt;Trabalhos&lt;/h1&gt;
            {atividades.map(
              (atividade) =&gt;
                atividade.checkTrabalho === true &amp;&amp; (
                  &lt;div&gt;
                    Todo: {atividade.nome} &lt;br /&gt;
                    descricao: {atividade.descricao}
                    &lt;button onClick={deleteTodo}&gt;deletar&lt;/button&gt;
                  &lt;/div&gt;
                )
            )}
          &lt;/div&gt;
  
          &lt;div key={values.id}&gt;
            &lt;h1&gt;Pessoal&lt;/h1&gt;
            {atividades.map(
              (atividade) =&gt;
                atividade.checkPessoal === true &amp;&amp; (
                  &lt;div&gt;
                    Todo: {atividade.nome} &lt;br /&gt;
                    descricao: {atividade.descricao}
                    &lt;button onClick={deleteTodo}&gt;deletar&lt;/button&gt;
                  &lt;/div&gt;
                )
            )}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      // ==================================================================================================
    );
  }
  </code></pre>