Delete item from list not rendering react js

Question

I am displaying table from API, so when I click to delete it should delete

Now it's deleting actually. but the problem is it's not rendering the output

Here is my code for that function

  const delpersonHandler = index => {
    const apiDel = api;
    console.log(index);
    api.splice(index, 1);
    console.log(api);
    setApi({ ...api, apiDel });
  };

here is where i call that

 <TableCell align="Justify">
   <Button variant="outlined">Edit</Button>
   <Button variant="outlined" onClick={() => delpersonHandler(id)}>
      Delete
   </Button>
 </TableCell>

full code is available here

https://pastebin.com/u7fAefBH

I Found this as answer, any other good method ? const temp = [...api]; temp.splice(id, 1); setApi(temp); console.log("state updated", api); — Logesh P
– Logesh P, Commented Feb 29, 2020 at 19:29

Suraj Sharma · Accepted Answer · 2021-07-02 04:22:46Z

3

React states are immutable hence doing api.splice(index, 1); does not work because you're directly affecting the React state.

api is an array but you're setting an object in the setApi setter function

the simplest way to do this is

    const delpersonHandler = index => {
        let oldApi = [...api] // new array containing api's elements
        oldApi.splice(index,1); 
        setApi(oldApi);
      };

edited Jul 2, 2021 at 4:22

answered Feb 29, 2020 at 19:55

Suraj Sharma

8577 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Logesh P Over a year ago

Yep.. Refer my answer

David R. · Accepted Answer · 2020-02-29 19:32:55Z

2

Assuming you are working with functional components, the useState hook delivers two values, specifically the getter and setter of your state, invoking the last one with some parameter will set a new value and invoke a render call.

In the example, setApi is this setter method, but you are calling it with an object as parameter instead an array. And by using the splice method with the api value is possible to inferer that it must be an array. So you need to call the setter with the same variable type:

const delpersonHandler = index => {
  // Don't apply changes directly, instead clone it and modify it.
  const newApi = api.slice();
  newApi.splice(index, 1);

  // Pass an array instead an object
  setApi(newApi); 
};

edited Feb 29, 2020 at 19:32

answered Feb 29, 2020 at 19:29

David R.

3611 silver badge7 bronze badges

4 Comments

goto Over a year ago

"the useState hook delivers two values, specifically the getter and setter of your prop" - useState, as implied by the name, is used for state, not props.

Logesh P Over a year ago

i followed your code.. its deleting, but its not rendering.. imgur.com/a/bfDTxgJ

David R. Over a year ago

@LogeshP Did you receive some warning in the console?

Logesh P Over a year ago

pls see the image.. i attached here on previous comment

Logesh P · Accepted Answer · 2020-02-29 19:41:42Z

1

I found the fix by using the below code

const delpersonHandler = index => {
const apiDel= [...api]; //getting the current state of array using spread operator
apiDel.splice(index, 1);  //deleting based on index
setApi(apiDel);
console.log("state updated", api);
}

[...api] without this line this wasn't working

answered Feb 29, 2020 at 19:41

Logesh P

2274 silver badges18 bronze badges

Collectives™ on Stack Overflow

Delete item from list not rendering react js

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related