How can use useState in typescript

Question

hi im useing typescript in to react and now use useState hook but have an error

my code :

import React , { useState } from "react";

interface userData {
    name: string;
}

export default function atbComponent() {


    let [data, setData] = useState<userData>({
        name: 'abolfazl',
    });

    

    return (
        <>
            <span>Hi..{data.name}</span>
        </>
    )
}

error :



ERROR
[eslint] 
src\components\text.tsx
  Line 10:27:  React Hook "useState" is called in function "atbComponent" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

after use :

// eslint-disable-next-line react-hooks/rules-of-hooks
    let [data, setData] = useState<userData>({
        name: 'abolfazl',
    });

But I want to know what the problem is

Does this answer your question? [React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function](https://stackoverflow.com/questions/55846641/react-hook-usestate-is-called-in-function-app-which-is-neither-a-react-funct) — dan1st, Jun 04 '23 at 18:01
If you read the error it tells you `React component names must start with an uppercase letter`, this is so react can tell apart native html tags and react components — Chris Li, Jun 04 '23 at 18:44

score 3 · Accepted Answer · answered Jun 04 '23 at 18:07

You have to use the Capital letter at starting if you want to use a function as a component. Please change the function name to below.

export default function AtbComponent() {
    let [data, setData] = useState<userData>({
        name: 'abolfazl',
    });
}

Please check the error which clearly indicates that your function is not following the hooks rules.

How can use useState in typescript

1 Answers1