Using state in react with TypeScript

Question

I am new to TypeScript. I've got a problem with displaying this.state.something inside the render method or assigning it to a variable inside a function.

Have a look at the most important piece of code:

interface State {
    playOrPause?: string;
}

class Player extends React.Component {
    constructor() {
        super();

        this.state = {
            playOrPause: 'Play'
        };
    }

    render() {
        return(
            <div>
                <button
                    ref={playPause => this.playPause = playPause}
                    title={this.state.playOrPause} // in this line I get an error
                    >
                    Play
                </button>
           </div>
        );
    }
}

The errors says: [ts] Property 'playOrPause' does not exist on type 'ReadOnly<{}>'.

I tried to declare the playOrPause property to be a type of string and it didn't work.

What am I missing here to make it work?

Possible duplicate of 'ValueChanging' does not exist on type 'Readonly<{}>' — linasmnew
– linasmnew, Commented Oct 28, 2017 at 9:02

felixmosh · Accepted Answer · 2019-10-30 13:44:44Z

192

You need to declare that your component is using the State interface, it used by Typescript's Generics.

interface IProps {
}

interface IState {
  playOrPause?: string;
}

class Player extends React.Component<IProps, IState> {
  // ------------------------------------------^
  constructor(props: IProps) {
    super(props);

    this.state = {
      playOrPause: 'Play'
    };
  }

  render() {
    return(
      <div>
        <button
          ref={playPause => this.playPause = playPause}
          title={this.state.playOrPause} // in this line I get an error
        >
          Play
        </button>
      </div>
    );
  }
}

edited Oct 30, 2019 at 13:44

answered Oct 28, 2017 at 9:01

felixmosh

35.8k10 gold badges81 silver badges98 bronze badges

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

11 Comments

Maciej S. Over a year ago

Thanks. It works now. I tried to declare only IState interface and declare that class Player is using IState only (It still doesn't work then) But when I declare that empty interface called IProps together with IState then it works fine. Why is that?

felixmosh Over a year ago

There is a meaning of the Generics position, the first position should indicate the props type, and the second is the state.

Rahul Yadav Over a year ago

if the state is declared outside the constructor state = { playOrPause: 'Play' } typescript doesn't validate it against IState. Why is it so?

felixmosh Over a year ago

How outside of the constructor?

Richard Rout Over a year ago

@RahulYadav if you do that you can just do state: IState = {...} and drop it from the generic props. It will be inferred.

|

Michael Freidgeim · Accepted Answer · 2021-12-31 02:57:43Z

55

In case anyone is wondering how to implement it in functional components with hooks ( not in a class):

const [value, setValue] = useState<number>(0);

useState is a generic function, that means that it can accept a type parameter. This type-parameter will tell TypeScript which types are acceptable for this state.

edited Dec 31, 2021 at 2:57

Michael Freidgeim

28.8k17 gold badges164 silver badges181 bronze badges

answered Jun 5, 2021 at 15:44

PedroMiotti

1,16411 silver badges13 bronze badges

1 Comment

user1073557 Over a year ago

This is only valid for a function in react, not a class. I've learned this painful lesson.

Dr4kk0nnys · Accepted Answer · 2020-09-02 22:07:22Z

In my case ( working with TypeScript, and the state value was actually a boolean ) I've had the same problem, I've fixed it by passing the state value I wanted to mark as output to String():

import React, { Component } from 'react';

interface ITestProps {
  name: string;
}

interface ITestState {
  toggle: boolean;
}

class Test extends Component<ITestProps, ITestState> {
  constructor(props: ITestProps) {
    super(props);

    this.state = {
      toggle: false,
    };

    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.setState((previousState, props) => ({
      toggle: !previousState.toggle,
    }));
  }

  render() {
    return (
      <div>
        Hello, {this.props.name}!
        <br />
        Toggle state is: {String(this.state.toggle)}
      </div>
    )
  }
}

Collectives™ on Stack Overflow

Using state in react with TypeScript

3 Answers 3

11 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

1 Comment

Comments

Linked

Related