Question

0

33

Views

How to update state of parent component after the server is updated in child component?

I have a todo list and after adding an item to it in the child component the change is not reflected straight away. I have to manually reload the page to see the change.The structure is something like this.

ToDo(Parent Componenet)
  -> Todoi(Child Component)

I am updating data in the child component but as I said earlier it is not reflecting the change unless I reload the page manually. If I can somehow change the state in parent component through child component then the component will reload itself but I am not able to do it. Here is the part where I am updating the list.

const handleList= (e) => {
      e.preventDefault();
      console.log(e);
      console.log(addtodo);
      axios.post('/list',{
        data:addtodo,
        userid:username
      }).then(function(res){
        if(res.data === "ToDo Updated"){
          navigate(`/todo/${username}`);
        }
      });
    }

What should I do to make it?

3 months ago ·

Juan Pablo Isaza

2 answers

Answer question

0

Usually, a react component will be rerendered under two situations:

The states have been updated.
The props have been updated.

Therefore, we could manually trigger the status change of the parent component in the child component or update the server response as the props of the parent component.

I don't know how you handle your data in the parent component, but I guess you might need to make React detect your data updating.

3 months ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Loading

Accepted Answer · 2022-07-04T03:44:47.521Z

You can either pass the state setter to your child component and then add the new entry in your post function:

const handleList= (e) => {
      e.preventDefault();
      console.log(e);
      console.log(addtodo);
      axios.post('/list',{
        data:addtodo,
        userid:username
      }).then(function(res){
        if(res.data === "ToDo Updated"){
          setList(prevState => prevState.concat(addtodo));
        }
      });
    }

<YourComponent setList={setList}/>

Or you can add a callback function prop to your component which is executed on successful request like so:

const handleList= (e) => {
      e.preventDefault();
      console.log(e);
      console.log(addtodo);
      axios.post('/list',{
        data:addtodo,
        userid:username
      }).then(function(res){
        if(res.data === "ToDo Updated"){
          onSuccess(addtodo)
        }
      });
    }

<YourComponent onSuccess={(todo)=>setList(prevState => prevState.concat(todo))}/>

I'm not sure what your state/data type looks like but I hope this helps!