CODEWITHSUNDEEP
javascriptreactjstypescript
Abdulsamet Kurt
Abdulsamet Kurt

Reputation: 1241

React.js useState with Array.push method on functional component

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)"

Upvotes: 4

Views: 16109

Answers (4)

Ruben van der Veen
Ruben van der Veen

Reputation: 171

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>
        )
      }
    <>
  )
}

Upvotes: 12

Taki
Taki

Reputation: 17664

you need to pass an array of strings to setCountries

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

Upvotes: 3

Vandesh
Vandesh

Reputation: 6904

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>
        )
      }
    <>
  )

Upvotes: 0

Mohamed Ramrami
Mohamed Ramrami

Reputation: 12711

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))

Upvotes: 0

Related Questions