React uses state to store variable values. It makes them easier to manipulate and manage.

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class LikeButton extends Component {
  constructor () {
    super(a)this.state = { isLiked: false }
  }

  render () {
    return (
      <button>{this.state.isLiked ? 'Submit' : 'cancel '}</button>)}}Copy the code

In the example above, the state stores an object. The object has the property isLiked. The value of this property can be used to control the copy of the button.

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class LikeButton extends Component {
  constructor () {
    super(a)this.state = { isLiked: false }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked:!this.state.isLiked
    })
  }

  render () {
    return (
      <button onClick={this.handleClickOnLikeButton.bind(this)}>{this.state.isLiked ? 'Submit' : 'cancel '}</button>)}}Copy the code

We added a click event that triggers a change in the property value in State. Whenever we change the value of state, we re-call the render function to render our changes to the page, but setState does not modify state immediately but stores it in a queue to be updated later. If you want to update state immediately, you can take a function as an argument, and this will do the trick, while using SetState multiple times will render only once without worrying about performance.