Search⌘ K
Home
Courses
Mastering TypeScript

Managing the Component State in React

Explore how to manage component state in React with TypeScript by defining state interfaces, initializing state in constructors, and updating state through setState to trigger UI changes. Understand the difference between props and state and apply this knowledge to toggle component behavior on user interaction.

We'll cover the following...

Introduction to the component state

Each React component can also have what is known as a component state. The difference between a component’s properties and its state is that properties are set and managed by the parent component, but the state is managed by the component itself.

As an example of how we can use component state, let’s update our App component, and set an internal property that will toggle on or off when we click on our button.

To indicate that a React component has a state, we add a second argument to our component definition as follows:

TypeScript 4.9.5
export interface IAppProps {}
export interface IAppState {
  showDetails: boolean;
}
class App extends
  React.Component<IAppProps, IAppState> {
    
  constructor(props: IAppProps) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      showDetails: false,
    };
  }
  render() {
    return (
      <div>
        <p>showDetails ={this.state.showDetails ? "true" : "false"}</p>
        <MyButton
          buttonName="Click here"
          handleButtonClick={this.handleClick}
        ></MyButton>
      </div>
    );
  }
  handleClick() {
    console.log(`App.handleClick() called`);
    this.setState({
      showDetails: !this.state.showDetails,
    });
  }
}
export default App;

Here, we have made four changes to our App ...