React - update item in list after edit

Question

I would like to create list of components in react. Each component has property - content. If I edited this property for single element what I should do to update this element on list component correctly?

Case 1:

1. Send "PUT" to server.
2. Save updated element in database.
3. "PUT" returns new list of elements.
4. In react, render a whole list component.

Case 2:

1. Send "PUT" to server.
2. Save updated element in database.
3. "PUT" return only operation status "true/false" not updated list.
4. In react, re-render a only single list element if "PUT" returns true.

What is best solution?

Answer 1

You would want to get the whole list again, just in case any other user has changed the data. So Case 1 seems like the appropriate answer.

You don't need to send the whole list on the update, just the element that was altered, perform the action and then call your API to retrieve the whole list.

Answer 2

you must put your data forms into a variable or state and then use is to post or put with axios in your react project

function onSubmit (e , id) {
          e.preventDefault()
          axios.put(`http://localhost:5002/Data/${id}`, {Data})
          .then(res => console.log(res))
          .catch(err => console.log('Login: ', err));            
      }