How to change button text on click in React

Last updated on Sep 20, 2022 by Suraj Sharma

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 = ()=> {
    // after one second reset the isSubmitting state
    }, 1000)
  return (
      <button onClick={handleClick}>
        {isSubmitting ? "Submitting" : "Submit"}

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

Rate this post

Suraj Sharma is a Full Stack Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.