how to pass an array of numbers with typescript and react

Question

I'm using Types in React for the first time and I'm not very familiar with it.

I'm trying to add numbers from a form in a child component to an array of numbers.

Therefor I have created a useState hook:

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

Now I'm trying to pass the setValuesList hook to the child component:

<AddNum
        setValues={setValuesList}
      />

In the child component I'm defining an interface for the props:

interface AppProps {
  setValues: (value: number) => void;
}

However when I try to call the setValues hook:

const addNumber = (value: string): undefined => {
const num = parseInt(value);
props.setValues((prevList) => prevList.concat(num));
return undefined;

};

I'm getting this error in the parent component:

/Users/acandael/Tutorials/react/add-nums/src/components/AddNum.tsx
TypeScript error in /Users/acandael/Tutorials/react/add-nums/src/components/AddNum.tsx(21,21):
Argument of type '(prevList: any) => any' is not assignable to parameter of type 'number[]'.
  Type '(prevList: any) => any' is missing the following properties from type 'number[]': pop, push, concat, join, and 27 more.  TS2345

    19 |   const addNumber = (value: string): undefined => {
    20 |     const num = parseInt(value);
  > 21 |     props.setValues((prevList) => prevList.concat(num));
       |                     ^
    22 |     return undefined;
    23 |   };
    24 |

Does anyone know how I can add numbers from a child component to an array of numbers in the parent component, and keep TypeScript happy?

Thanks for your help

What is num? Is that a number or an array of numbers?

Ramesh Reddy
– Ramesh Reddy

2020-07-15 14:32:49 +00:00
Commented Jul 15, 2020 at 14:32 — Ramesh Reddy
– Ramesh Reddy, Commented Jul 15, 2020 at 14:32
@RameshReddy num is a number

Toontje
– Toontje

2020-07-15 14:39:28 +00:00
Commented Jul 15, 2020 at 14:39 — Toontje
– Toontje, Commented Jul 15, 2020 at 14:39
Did you change the interface as in my updated answer?

Ramesh Reddy
– Ramesh Reddy

2020-07-15 15:12:19 +00:00
Commented Jul 15, 2020 at 15:12 — Ramesh Reddy
– Ramesh Reddy, Commented Jul 15, 2020 at 15:12

subashMahapatra · Accepted Answer · 2020-07-15 15:41:41Z

1

You are trying to change the state value of an array of numbers to a number by calling props.setValue(num).

Also the type definition for setValues in interface AppProps is incorrect. TS will infer the type of the setter function setValuesList as React.Dispatch<SetStateAction<number[]>> which is incompatible with the type (value: number) => void.

The correct definition for the setValues function would be if you want to pass the function setValuesList as props.

interface AppProps {
   setValues: React.Dispatch<SetStateAction<number[]>>
 
   // setValues: (numArr: number[]) => void  ( this will work as well )
}

The solution for updating the state value of valuesList would be to either use functional update or to create another callback function that receives a number as argument and updates the state.

With functional update

setValues(prev => prev.concat(num))

With setValues as a different callback function

// with this solution you don't need to modify the interface AppProps

interface AppProps {
   setValues: (num: number) => void
}

const Foo: React.FC<AppProps> = ({ setValues }) => {
  
  // component logic
  
  return (
   <>
   </>
  )
}

// in parent component
const [valuesList, setValuesList] = useState<number[]>([])

const updateWithNewValue = useCallback((num: number) => {
   setValuesList(prev => prev.concat(num))
}, [])

// pass the updateWithNewValue as props

<Foo setValues={updateWithNewValue}/>

A similar example in codesandbox

edited Jul 15, 2020 at 15:41

answered Jul 15, 2020 at 15:03

subashMahapatra

6,8772 gold badges23 silver badges27 bronze badges

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

5 Comments

Toontje Over a year ago

thanks @subashMahapatra, I tried to implement your sollution with callback function, but then I get this error message: Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

subashMahapatra Over a year ago

That could be the result of how you call the setValues function inside the component.

Toontje Over a year ago

I'm calling the setValues function like this: const addNumber = (value: string): undefined => { const num = parseInt(value); props.setValues(num); return undefined; };

subashMahapatra Over a year ago

Here is a codesandbox with everything working. Try to edit the sandbox with a minimal example of the issue.

Toontje Over a year ago

thanks @subashMahapatra, I found the issue. Should have called my addNumber function like this: onClick={() => addNumber(props.value)}

Collectives™ on Stack Overflow

how to pass an array of numbers with typescript and react

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related