Question 215508 in Reactjs Question posted in
The new location for the React Documentation can be found here.

ReactJs: useEffect default type assignment error

I am trying to set a type to a useState default value.

...

export default () => {
    const [dropdowns, setDropdowns] = useState({
        websites: [{ label: String, value: Number }],
    });

    useEffect(() => {
        setDropdowns({
            websites: [
                {
                    label: 'Google.com',
                    value: 1,
                },
            ],
        });

        // TODO: Write clean function after api implementation is complete
        return () => {};
    }, []);

    ...
};

Why am I getting this error..?

enter image description here

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to @Yewin, here is my final working code snippet.

    ...

type dropdownsType = {
    websites: { value: Number; label: String }[];
    accountTypes: { value: Number; label: String }[];
    statuses: { value: Boolean; label: String }[];
};

export default () => {
    const [dropdowns, setDropdowns] = useState<dropdownsType>({
        websites: [],
        accountTypes: [],
        statuses: [],
    });

    useEffect(() => {
        setDropdowns({
            websites: [{ label: 'Google.com', value: 1 }],
            statuses: [
                { label: 'Active', value: true },
                { label: 'Inactive', value: false },
            ],
            accountTypes: [
                { label: 'Developer', value: 1 },
                { label: 'Personal', value: 2 },
                { label: 'Professional', value: 3 },
            ],
        });

        // TODO: Write clean function after api implementation is complete
        return () => {};
    }, []);
}

  2. 0 
    useState({
    websites: [{ label: String, value: Number }],
});

    Is setting the initial state to { websites: [{ label: String, value: Number }] } instead of specifying the type. This causes TypeScript to incorrectly infer the type of the state as:

    {
    websites: {
        label: StringConstructor;
        value: NumberConstructor;
    }[];
}

    useState accepts a generic type to specify the type of the state:

    useState<{ websites: { label: string, value: number }[] }>({ websites: [] })
    Login or Signup to reply.
  3. 0

    that showing errros bc of your data type is wrong

    pls define correct types & update data like that you defined.

    pls define type

    type dropdownType = { value: String; label: String };

type stateType = {
  websites: dropdownType[];
};

    const [dropdowns, setDropdowns] = useState<stateType>({
    websites: []
  });

    useEffect(() => {
    setDropdowns({
      websites: [
        {
          label: "Google.com",
          value: "1"
        }
      ]
    });

    example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search