I want to change value of state with useState hook, but I've never worked with useState hook in functional component before, and I get a very strange error. Even though I define all of my variables as string[], it tries to define whole array as number.

import * as React from 'react'
import { NextPage } from 'next'

const IndexPage: NextPage = () => {
  const [countries, setCountries] = React.useState<string[]>([])

  return (
    <>
      {
        ["Dallas", "Oregon", "New York", "California"].map((x: string) =>
          <button onClick={() => setCountries(countries.push(x))}>
            <span>{x}</span>                  ^^^^^^^^^^^^^^^^^
          </button>
        )
      }
    <>
  )
}

Here is strange error I get:

(method) Array<string>.push(...items: string[]): number
"Argument of type 'number' is not assignable to parameter of type 'SetStateAction<string[]>'.ts(2345)"

I want to change value of state with useState hook, but I've never worked with useState hook in functional component before, and I get a very strange error. Even though I define all of my variables as string[], it tries to define whole array as number.

import * as React from 'react'
import { NextPage } from 'next'

const IndexPage: NextPage = () => {
  const [countries, setCountries] = React.useState<string[]>([])

  return (
    <>
      {
        ["Dallas", "Oregon", "New York", "California"].map((x: string) =>
          <button onClick={() => setCountries(countries.push(x))}>
            <span>{x}</span>                  ^^^^^^^^^^^^^^^^^
          </button>
        )
      }
    <>
  )
}

Here is strange error I get:

(method) Array<string>.push(...items: string[]): number
"Argument of type 'number' is not assignable to parameter of type 'SetStateAction<string[]>'.ts(2345)"

• javascript
• reactjs
• typescript

4 Answers 4

Array.push returns a number so you have to change your code to this

import * as React from 'react'
import { NextPage } from 'next'

const IndexPage: NextPage = () => {
  const [countries, setCountries] = React.useState<string[]>([])

  return (
    <>
      {
        ["Dallas", "Oregon", "New York", "California"].map((x: string) =>
          <button onClick={() => {
          // either this
          setCountries(countries.concat(x))
          // or
          setCountries([...countries, x]
          }>
            <span>{x}</span>                  
          </button>
        )
      }
    <>
  )
}

you need to pass an array of strings to setCountries

<button onClick={() => setCountries([...countries, x])}>

Array.push returns number :

The new length property of the object upon which the method was called.

Also you probably don't want to mutate the state, try setCountries(countries.concat(x))

In your case, setCountries expects that you pass an array of string items, but what is being passed to it is the return type of the function Array.push which is of type number

If you want to just remove a country on clicking that button, you can do so using -

return (
    <>
      {
        ["Dallas", "Oregon", "New York", "California"].map((x: string) =>
          <button onClick={() => setCountries(countries.concat(x))}>
            <span>{x}</span>                  
          </button>
        )
      }
    <>
  )