title: Updating data from json server in react
body: <p>I'm trying to update data from JSON server in react but it doesn't update it.</p>
  <p>Here's the entire code:</p>
  <pre><code>import { useState, useEffect } from &quot;react&quot;;
  
  const EditTask = ({ task, onEdit }) =&gt; {
    const [tasks, setTasks] = useState([]);
  
      useEffect(() =&gt; {
          const getTasks = async () =&gt; {
            const tasksfromServer = await fetchTasks();
            setTasks(tasksfromServer);
          };
      
          getTasks();
        }, []);
  
          // Fetch Tasks
          const fetchTasks = async () =&gt; {
              const res = await fetch(&quot;http://localhost:5000/tasks&quot;);
              const data = await res.json();
  
              return data;
          };
  
      // Fetch Task
      const fetchTask = async (id) =&gt; {
          const res = await fetch(`http://localhost:5000/tasks/${id}`);
          const data = await res.json();
  
          return data;
      };
  
       // Edit Task
      const editTask = async (event, id) =&gt; {
        event.preventDefault()
          const taskToEdit = await fetchTask(id)
          const updateTask = { ...taskToEdit, text: event.target.text, day: event.day }
  
          const res = await fetch(`http://localhost:5000/tasks/${id}`, {
              method: &quot;PUT&quot;,
              headers: {
                  &quot;Content-type&quot;: &quot;application/json&quot;
              },
              body: JSON.stringify(updateTask)
          })
  
          const data = await res.json();
  
          setTasks(tasks.map((task) =&gt; task.id === id ? { ...task, text: data.text, day: data.day } : task))
      }
  
    return (
      &lt;form className=&quot;add-form&quot; onSubmit={(e) =&gt; editTask(e, task.id)}&gt;
      &lt;div className=&quot;form-control&quot;&gt;
        &lt;label&gt;Task&lt;/label&gt;
        &lt;input
          type=&quot;text&quot;
          placeholder=&quot;Add Task&quot;
          defaultValue={task.text}
        /&gt;
      &lt;/div&gt;
      &lt;div className=&quot;form-control&quot;&gt;
        &lt;label&gt;Day &amp; Time&lt;/label&gt;
        &lt;input
          type=&quot;text&quot;
          placeholder=&quot;Add Day &amp; Time&quot;
          defaultValue={task.day}
        /&gt;
      &lt;/div&gt;
  
      &lt;input type=&quot;submit&quot; value=&quot;Edit Task&quot; className=&quot;btn btn-block&quot; /&gt;
    &lt;/form&gt;
    )
  }
  
  export default EditTask
  </code></pre>
  <p>What am I doing wrong, cause I tried updating it differently and it still doesn't work. But if I update it from the react dev tools, it works perfectly.
  I'v been on this for 2 days now and still not getting it.</p>