CODEWITHSUNDEEP
reactjstypescriptreact-hooks
Keven Jesus
Keven Jesus

Reputation: 189

React Hooks with typescript: Property 'data' does not exist on type

I have an error that makes no sense, I am typing the value of my state with hooks, but he says the error is not the same type.

Already tried with empty array and even array with some data and always error is the same.

import React, { useState } from 'react';
import { Row, Col } from 'config/styles';
import Bed from './Bed';

interface DataTypes {
  date: string;
  value: number;
}

function Beds(): JSX.Element {
  const { data, setData } = useState<DataTypes[]>([]);

  return (
    <>
      <Row>
        {data.map((d, i) => (
          <Col key={i} sm={16.666} lg={10}>
            <Bed {...d} />
          </Col>
        ))}
      </Row>
    </>
  );
}

export default Beds;

Erro this:

TypeScript error in /Users/keven/Documents/carenet/orquestra-frontend/src/Beds/index.tsx(11,11):
Property 'data' does not exist on type '[DataTypes[], Dispatch<SetStateAction<DataTypes[]>>]'

Upvotes: 15

Views: 13842

Answers (2)

Ihor Shtyka
Ihor Shtyka

Reputation: 181

you should use const [ data, setData ] instead of const { data, setData }

Upvotes: 18

laurent
laurent

Reputation: 90863

It should be an array, not an object:

const [data, setData] = useState<DataTypes[]>([]);

You have this indication in the error message:

type '[DataTypes[], Dispatch<SetStateAction<DataTypes[]>>]'

Upvotes: 9

Related Questions