Argument of type 'number[]' is not assignable to parameter of type 'SetStateAction'

Question

I started out typescript with Ionic-react so i am facing typescript issue in setting my state

Here is my code

import { RouteComponentProps } from "react-router-dom";

type ICoord = {
  data: number[];
};
type Props = RouteComponentProps & ICoord;

const Verify: React.FC<Props> = ({ history }) => {
  const coordinates: number[] = [];
  const [data, setdata] = useState<ICoord>();

  useEffect(() => {}, [data]);
  const start = () => {
    navigator.geolocation.watchPosition(
      (data) => {
        console.log(data);
        coordinates[0] = data.coords.latitude;
        coordinates[1] = data.coords.longitude;
        setdata(coordinates);
      },
      (err) => {
        console.log(err);
      },
      { enableHighAccuracy: true }
    );
  };
  const stop = () => {};

  return (
    <div>
      <button onClick={start}>start</button>
      <button onClick={stop}>stop</button>
    </div>
  );
};

export default Verify;

so when i try to set state in the line

setdata(coordinates);

it gives me the error

Argument of type 'number[]' is not assignable to parameter of type 'SetStateAction<ICoord | undefined>'. Type 'number[]' is not assignable to type '(prevState: ICoord | undefined) => ICoord | undefined'.

You need `setdata({ data: coordinates })` – Paul Huynh Sep 17 '20 at 06:30 — Paul Huynh, Sep 17 '20 at 06:30

score 2 · Answer 1 · answered Sep 17 '20 at 15:15

2

const [data, setdata] = useState<ICoord | undefined>();

answered Sep 17 '20 at 15:15

Aaron Saunders

33,180
5
60
80

score 1 · Answer 2 · answered Sep 17 '20 at 08:05

1

just lose "ICoord" as you only have one value for it, you don't need to write more code. Also, in useState you can define the data type

const [data, setData] = useState([])

answered Sep 17 '20 at 08:05

That Guy Kev

386
2
10

Argument of type 'number[]' is not assignable to parameter of type 'SetStateAction'

2 Answers2