Push to state array React with TypeScript

Question

I'm trying to add a task object in my tasks array by the addTask method, this method its getting the previous state and adding the new task, it works with JSX but not when I am using TypeScript. The error that I'm getting is

Type 'ITask[] | undefined' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators.  TS2569

import React, { Fragment } from 'react';

interface ITask {
    name: string;
    done: boolean;
}

interface IProps {

}

interface IState {
    newTask?: string;
    tasks?: Array<ITask>;
}

class App extends React.Component<IProps, IState>{
    constructor(props: any) {
        super(props);
        this.state = {
            newTask: '',
            tasks: []
        }
    }


    addTask(name:string) {
        this.setState(prevState => ({
            tasks: [...prevState.tasks, {name, done: false}]
        }));
    }

    render() {
        return (
            <Fragment>
            </Fragment>
        );
    }
}

wentjun · Accepted Answer · 2020-04-14 04:58:20Z

5

You might have to explicitly type the new object as ITask, to tell the TypeScript compiler that you are pushing an object of type ITask to the tasks state.

In addition, tasks is optional. One way to get around this would be to set a default value (empty array []) when you are spreading it.

addTask(name:string) {
  const newTask: ITask = {name, done: false}
  this.setState((prevState) => ({
    tasks: [...(prevState.tasks ?? []), newTask]
  }));
}

Given that tasks (and even newTask) is actually assigned a value on the constructor, there is actually no need to mark it as optional on your IState interface.

interface IState {
  newTask: string;
  tasks: Array<ITask>;
}

This will save you the need from checking if tasks is undefined when you are setting state.

edited Apr 14, 2020 at 4:58

answered Apr 14, 2020 at 4:52

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nilanka Manoj · Accepted Answer · 2020-04-14 04:57:27Z

1

you have to cast type of {name, done: false} to ITask before adding it to the array:

tasks: [...(prevState.tasks ?? []), {name: name, done: false} as ITask]

answered Apr 14, 2020 at 4:57

Nilanka Manoj

3,7474 gold badges21 silver badges52 bronze badges

Comments

user6749601 · Accepted Answer · 2020-04-14 04:55:16Z

0

You're supposed to declare both fields correctly inside the object to pass.

// use: {name: name, done: false}
addTask(name:string) {
    this.setState(prevState => ({
        tasks: [...prevState.tasks, {name: name, done: false}]
    }));
}

answered Apr 14, 2020 at 4:55

user6749601

Collectives™ on Stack Overflow

Push to state array React with TypeScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related