Setting the state with React + TypeScript

Question

I cannot figure out how to set the state of my React component with TypeScript.

I'm making a simple Todo list
I have a component for the entire list: TodoList
I want to seed the list with some items to play around with
I figured I'd send in a simple array as the props to the TodoList component, and then immediately set that as the state so I have something to work off of

import * as React from "react";
import { TodoItem, ITodoItem } from "../TodoItem";

interface ITodoListProps {
    items: ITodoItem[];
}

interface ITodoListState {
    stateItems: ITodoItem[];
}

export class TodoList extends React.Component<ITodoListProps, Partial<ITodoListState>> {
    constructor(props: ITodoListProps) {
        super(props);

        // Trouble figuring this part out
        //  I'd like to set the state to the list from the 
        //  props, as a seed.
        this.setState({
            stateItems: this.state.stateItems
        });
    }

    public render() {
        return (
            <div>
                <ul>
                    // This should probably be displaying the items from the state, and not the props.
                    {this.props.items.map((todo, i) => {
                        return <TodoItem key={i} name={todo.name} />
                    })}
                </ul>
            </div>
        );
    }
}

Nitzan Tomer · Accepted Answer · 2017-05-15 23:27:59Z

4

You need to pass the props.items to the state when constructing the initial state:

export class TodoList extends React.Component<ITodoListProps, Partial<ITodoListState>> {
    constructor(props: ITodoListProps) {
        super(props);

        this.state = {
            stateItems: props.items
        };
    }
    ...
}

answered May 15, 2017 at 23:27

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

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

2 Comments

binki Over a year ago

Is there a way to do this without always having to write super(props) and props:ITodoListProps? It’s just boilerplate which shouldn’t be necessary but if I assign to state outside of the constructor it seems to lose type safety…

Nitzan Tomer Over a year ago

@binki You must call super, it's a javascript thing: "If there is a constructor present in subclass, it needs to first call super() before using "this"" (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…). As for the props, if you want the compiler to know the types you need to specify them.

Balázs Édes · Accepted Answer · 2017-05-15 23:22:07Z

3

In the constructor when setting the initial state, simply assign the value you want to this.state:

constructor() {
  // ...
  this.state = { stateItems: ... /* initial value */ }
}

Later in the lifecycle methods or event listeners you can change the state the way you are doing it in the constructor with setState

answered May 15, 2017 at 23:22

Balázs Édes

13.9k7 gold badges60 silver badges105 bronze badges

1 Comment

binki Over a year ago

I think this could be improved by showing the call to super and passing of props. People might think you’re implying that it’s not necessary.

Collectives™ on Stack Overflow

Setting the state with React + TypeScript

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related