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 loo

Answer 1

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 {
  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 (
      

        Hello, {this.props.name}!
        

        Toggle state is: {String(this.state.toggle)}
      
    )
  }
}