Type useState as Array of Strings in React TypeScript

avatar

Borislav Hadzhiev

Last updated: Apr 20, 2022

banner

Photo from Unsplash

Type useState as Array of Strings in React TypeScript #

To type the useState hook as an array of strings in React, use the hook's generic, e.g. const [names, setNames] = useState<string[]>([]). The state variable can be initialized to an empty array or an array of strings and will only accept string values.

App.tsx
import {useState} from 'react'; const App = () => { // 👇️ const names: string[] const [names, setNames] = useState<string[]>([]); return ( <div> <button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}> Add name </button> {names.map((element, index) => { return ( <div key={index}> <h2>{element}</h2> </div> ); })} </div> ); }; export default App;

We used a generic to type the useState hook correctly while initializing the hook with an empty array.

react usestate string array typescript

Had we not used the generic, e.g. useState<string[]>([]) when typing the hook, the type of the state variable would be never[], in other words, an array that will never contain any elements.

If you pass even a single empty string to the array, TypeScript will be able to infer the type of the state variable.

App.tsx
import {useState} from 'react'; const App = () => { // 👇️ const names: string[] const [names, setNames] = useState(['']); return ( <div> <button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}> Add name </button> {names.map((element, index) => { return ( <div key={index}> <h2>{element}</h2> </div> ); })} </div> ); }; export default App;

Notice that we didn't even have to use a generic to type the state variable. TypeScript was able to infer the type based on the provided initial value.

However, it is a best practice to always explicitly type the useState hook, especially when working with arrays and objects.

If we try to add a value of a different type to the state array, we would get a type checking error.

App.tsx
import {useState} from 'react'; const App = () => { // 👇️ const names: string[] const [names, setNames] = useState<string[]>([]); // ⛔️ Argument of type '(prevNames: string[]) => (string | number)[]' is not // assignable to parameter of type 'SetStateAction<string[]>'. setNames(prevNames => [...prevNames, 1000]); return ( <div> <button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}> Add name </button> {names.map((element, index) => { return ( <div key={index}> <h2>{element.toUpperCase()}</h2> </div> ); })} </div> ); }; export default App;

The example shows how trying to add a number to a state array that is typed as string[] causes the type checker to error out.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.