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


Rate this post


Suraj Sharma is the founder of Future Gen AI Services. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.