How to change button text on click in React

In this tutorial, you will learn how you can change the button text on click of the button in React.

Consider you have a functional component <Form />, on click of the submit <button /> you want to change the text to "submitting" and reset the text to "submit" when request is complete.

import React from 'react';

const Form = () => {
  const [isSubmitting, toggleSubmit] = React.useState(false)

  const handleClick = ()=> {
    toggleSubmit(!isSubmitting)
    // after one second reset the isSubmitting state
    setTimeout(()=>{
      toggleSubmit(false)
    }, 1000)
  } 
  return (
    <form>
      <button onClick={handleClick}>
        {isSubmitting ? "Submitting" : "Submit"}
      </button>
    </form>
  );
}

export default Form;

I have used a isSubmitting local state, which is set to true when the submit button is clicked and after one sec resets to false.

Related Solutions

• How to pass state data in React Router

• How to add a custom font in React Material UI

• How to dynamically set Meta Title Tag in React