How to update data in ReactJS using JSON server

Question

I am new to react and I can fetch the data from JSON file . Now I need to update those values and submit to the JSON file . I am struggling to submit updated input field in JSON file

 submitEmpData(event) {
    event.preventDefault();
    this.state.empProjects.allocation=this.state.allocation;
      this.setState({
        empProjects:this.state.empProjects
      });
    return fetch('http://localhost:3000/Employee/' + this.state.empProjects.id, {
        method: 'PUT',
        mode: 'CORS',
        body: this.state.empProjects,
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(res => {
        return res;
    }).catch(err => err);
  }

Answer 1

There are some ways to trigger a render in react:

You send new values down as props to a child component, or

You use a form of state (hooks or setState for example) to update a components state.

In your example, add a setState once the fetch promise has either rejected or resolved, setting the data needed for rendering.

Answer 2

I have restructured the code for better understanding. I believe JSON.stringify() and res.json() may places where you might need to look into.

async submitEmpData(event) {
  event.preventDefault();

  let { empProjects, allocation } = this.state;

  empProjects.allocation = allocation;

  // updating the state
  this.setState({
    empProjects,
  });

  // calling the api
  try {
    let res = await  fetch("http://localhost:3000/Employee/" + this.state.empProjects.id, {
      method: "PUT",
      mode: "CORS",
      body: JSON.stringify(this.state.empProjects),
      headers: {
        "Content-Type": "application/json"
      }
    })
    return await res.json();
  } catch (err) {
    return err;
  }
}

Kindly ping me in comments for any clarification

Answer 3

The following method is wrong to change the JSON because the this.state is an object and javascript will check the reference for comparison ( See this ).

 this.state.empProjects.allocation=this.state.allocation; this.setState({ empProjects:this.state.empProjects });

instead of this, you can use the spread operator to create a new object:

this.setState({
   ...this.state, this.state.empProjects: { ...this.state.empProjects, allocation: "NEW value"}
})

Also to send the request using fetch, the body must match with content type :

body: JSON.stringify(this.state.empProjects)