This tutorial relates to type in React with TypeScript. If you want to know how to type useState as array of strings in React TypeScript, let’s read this article, it’s helpful for you. Let’s go into detail now.
Type useState as Array of Strings in React TypeScript
You can use a generic if you want to type your useState hook. It will make your useState hook value easy to maintain and check the error, and help you to reduce mistakes. To define a type to useState, you will need to add <type> between useState versus the initial value.
Example :
import { useState } from 'react';
import './App.css';
function App() {
const [names,setNames] = useState<string[]>([])
const [name,setName] = useState<string>('')
const nameList =(<div>{
names.map(ele=>{
return (<li>{ele}</li>)
})}</div>
)
const handleSubmit = ()=>{
setNames([name,...names])
}
const handleInput = (e:any)=>{
setName(e.target.value)
}
console.log(names)
return (
<div className="App">
<input type={'text'} onChange={handleInput}></input>
<button onClick={handleSubmit}>ADD</button>
<ul>{nameList}</ul>
</div>
);
}
export default App;Array string, and with name is a string. So when I press ADD button, all the name input will be set to name then string array names will append name.
Output :
If you try to add a number type to a string array, of course, you will get an error.
Example :
import React, { useState } from "react";
const [names,setName] = useState<string[]>([])
setName(5)Error :
The argument of type 'number' is not assignable to the parameter of type 'string.'
If we do not use generic to defined type to useState the type will be never[] type, and we can’t assign a string to it. If I do, my application will get an error and can’t work.
Example :
import { useState } from 'react';
import './App.css';
function App() {
const [names,setNames] = useState([])//Type never[]
const [name,setName] = useState<string>('')
const nameList =(<div>{
names.map(ele=>{
return (<li>{ele}</li>)
})}</div>
)
const handleSubmit = ()=>{
setNames([name,...names])
}
const handleInput = (e:any)=>{
setName(e.target.value)
}
console.log(names)
return (
<div className="App">
<input type={'text'} onChange={handleInput}></input>
<button onClick={handleSubmit}>ADD</button>
<div>{names}</div>
<hr></hr>
<ul>{nameList}</ul>
</div>
);
}
export default App;Error:
Error: Type 'string' is not assignable to type 'never'.
12 | )
13 | const handleSubmit = ()=>{
> 14 | setNames([name,...names])
| ^^^^
15 | }
16 | const handleInput = (e:any)=>{
17 | setName(e.target.value)
Summary
In this tutorial, I explained how to type useState as an Array of String in React TypeScript. You can use generic type and pass-in type for useState hook.
Maybe you are interested:
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm