how to remove number from array of numbers using TypeScript and React

Question

I have a parent component (App.tsx). In this component I'm defining a hook that holds and sets an array of numbers:

const [valuesList, setValuesList] = useState<number[]>([]);

for a previous childcomponent (AddNumber.tsx) I defined a function that adds a number to the array of numbers:

const addNumberToList = (num: number) => {
    setValuesList((prev) => prev.concat(num));
  };

then I passed the function to the child component. That worked fine.

However now I need to create a function to delete a number from the array.

Does anyone now how to implement that function?

In a previous app I implemented deleting a number from the list like this:

setValuesList(valuesList.filter((e) => e !== value));

But because I'm using TypeScript, I can't do it like that anymore, because I need to pass the deleteNumberFromList method to the childcomponent(NumberList.tsx)

Thanks for your help,

Anthony

Does this answer your question? Delete item from state array in react — Emile Bergeron
– Emile Bergeron, Commented Jul 16, 2020 at 17:01

subashMahapatra · Accepted Answer · 2020-07-16 16:47:02Z

1

It will be pretty similar, create a new function that takes the number as argument and updates the state after removing the number from the valuesList.

const removeNumberFromList = (num: number) => {
  setValuesList((prev) => prev.filter(el => el !== num))
}

// can be called like removeNumberFromList(10)
// or can be passed as onClick={() => removeNumberFromList(10)}

The type definition is pretty much the same

interface AppProps {
  addNumberToList: (num: number) => void;
  removeNumberFromList: (num: number) => void;
}

answered Jul 16, 2020 at 16:47

subashMahapatra

6,8772 gold badges23 silver badges27 bronze badges

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

1 Comment

Toontje Over a year ago

thanks @subashMahapatra, that worked! I tried something similar, but forgot to adjust the interface.

Luke Storry · Accepted Answer · 2020-07-16 16:46:43Z

0

You can still use that filter bit of code, you just have to add types to it:

    setValuesList((prev) => prev.filter((e:number) => e !== value));

answered Jul 16, 2020 at 16:46

Luke Storry

6,7821 gold badge11 silver badges25 bronze badges

Collectives™ on Stack Overflow

how to remove number from array of numbers using TypeScript and React

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related