REACT: How to update the list after click button EDIT?

Question

I make request to the server using fetch and get response - category list. This list I display in view- table. Near each category on the right I have button Edit. When I click this button appears form with one input and button submit and I can change title some category. I use API method PUT that change category.

But when I click button submit after editing title of the category my list the same. Because list is not update. And at that moment I still don't see the title name changed.

My list update only I reload page in browser

How to update the list after click button EDIT?

/..... - Code which I delete in question just to have less code in the question

Home.js:

const Home = () => {
  const [value, setValue] = useState({
    listCategory: [],
    numberId: "",              
    isOpened: false,
    /.....
  });
 
useEffect(() => {
    async function fetchData(/......) {
        const response = await fetch(`/.....`, {
          method: 'GET',  headers: {/.....}   });
        const data = await response.json();
             setValue(prev => ({
                ...prev,
                listCategory: data.data,
                /......
             }));
    }  fetchData(/.....); 
  }, [/.....]);

const changeId = (argNumberId) => {         
     setValue({
        ...value,
        numberId: argNumberId,
        isOpened: true
    });};
    
  return (
    <div>
               <Table dataAttribute={value.listCategory}  changeId={changeId}  valueId={value.numberId} />
    
                //COMPONENT WHICH CHANGE TITLE CATEGORY:
               {value.isOpened && <ChangeCategory value={value.numberId} />}    
   </div>);};

ChangeCategory.js:

const ChangeCategory = (props) => {
    const {handleSubmit, values, handleChange} = useFormik({  
      initialValues: {
          title: '',
      },
    onSubmit: async (formValues) => {
        const response = await fetch(`${apiUrl}/${props.value}`, { // props.value - id category which I edit, I get this id from field numberId in state
            method:'PUT',  body: JSON.stringify(formValues),  headers: {/.....} });
        const data = await response.json();  
       }});
    
   return (    
    <div>
      <form onSubmit={handleSubmit}>   
       <InputCategory
         label="title"
         id="title" 
         inputProps={{
           name:'title',
           value: values.title,
           onChange: handleChange,   
       }}/>
          <button type="submit">Edit</button>
     </form>
   </div>);};

Table.js:

export default (props) => (
  <table>
    <thead>
      <tr>
        <th>ID</th>  
        <th>TITLE</th>
      </tr>
    </thead>
    <tbody>
       {props.dataAttribute.map(item => (
        <tr key={item.id}>
          <td>{item.id} </td>
          <td>{item.title} </td>
          // BUTTON WHICH OPEN MODAL AND CHANGE ID IN STATE
          <td><button onClick={() => props.changeId(item.id)}>Edit</button></td> 
        </tr>
      ))}
    </tbody>
  </table>
);

Answer 1

You could update the state directly in your onSubmit method, after a successful API call. You already have the data so just add the method to handle the update :

onSubmit: async (formValues) => {
              const response = await fetch(`${apiUrl}${listRoute}/${props.value}`, { // props.value - id category which I edit, I get this id from field numberId in state
                  method:'PUT',  body: JSON.stringify(formValues),  headers: {/.....} });
              const data = await response.json();  
                // ADD THIS :
               props.updateList(data.data);
       }}); 

You need to add updateList in you parent component : Home.js

const updateList = data => {

    setValue({ ...value, listCategory: data })
}

and pass it as a props to ChangeCategory

{value.isOpened && <ChangeCategory 
                       value={value.numberId} 
                       updateList={updateList}
                   />}