In this article, we will explore how to change button text on click in a React application using different approaches. When developing interactive web applications, developers often come across situations where they need to dynamically change the text of a button based on a user’s interaction. React, a widely-used JavaScript library for creating user interfaces offers various techniques to effortlessly achieve this functionality.
In React, the user interface gets divided into reusable components. Each component maintains its own state and rendering logic. When it comes to changing the button text upon clicking, involves modifying the component’s state and updating its rendering accordingly.
Pre-requisites
- Introduction to React
- React Hooks
- NPM or NPX
Steps to Create React Application
Step 1: Create a react application by using this command
npx create-react-app <<Project-Name>>
Step 2: After creating your project folder, use the following command to navigate to it:
cd <<Project-Name>>
Project Struture:
Approach 1: Using setTimeout() Method
In this approach, the button text undergoes changes by utilizing the setTimeout() method. When the button is clicked, the text immediately switches to “Loading…” through the setButtonText() function. Subsequently, a deliberate delay of 2000 milliseconds (or 2 seconds) is introduced using setTimeout. After this interval, another invocation of setButtonText brings back the original text as “Submit.” This implementation creates a transient loading state that offers users visual feedback while an action is being processed. By incorporating the setTimeout method with a time delay in updating the state, it contributes to a smoother user experience by briefly altering the displayed content before returning to its initial state.
Example:
- App.js
Javascript
import React, { useState } from 'react'; function App() { const [buttonText, setButtonText] = useState('Submit'); const handleClick = () => { setButtonText('Loading...'); setTimeout(() => { setButtonText('Submit'); }, 2000); // Reverts back to 'Submit' after 2 seconds }; return ( <div style={styles.container}> <h1 style={styles.heading}> Geeksforneveropen </h1> <button onClick={handleClick} style={styles.btn}> {buttonText} </button> </div> ); } export default App; const styles = { container: { textAlign: 'center', margin: 'auto', padding: '20px', width: 400, }, heading: { fontSize: '34px', marginBottom: '10px', color: "green", borderBottom: "3px solid crimson", paddingBottom: 20, borderRadius: "8px", }, btn: { backgroundColor: 'green', fontSize: 20, color: 'white', cursor: 'pointer', margin: 10, padding: 15, borderRadius: "8px", border: "none", boxShadow: "0px 0px 10px 0px grey", }, }; |
Output:
Approach 2: Using Ternary Operator
A button’s text change can be streamlined by using a ternary operator. In this approach, the state variable called “buttonText” gets modified through the handleClick function. The ternary operator assesses the current value of buttonText; if it happens to be “Submit” then it sets it to “Loading…” and vice versa. The updated state triggers React to re-render the button with the freshly updated text after each click.
Example :
- App.js
Javascript
import React, { useState } from 'react'; function App() { const [buttonText, setButtonText] = useState('Submit'); const handleClick = () => { setButtonText(buttonText === 'Submit' ? 'Loading...' : 'Submit'); }; return ( <div style={styles.container}> <h1 style={styles.heading}>Geeksforneveropen</h1> <button onClick={handleClick} style={styles.btn}> {buttonText} </button> </div> ); } export default App; const styles = { container: { textAlign: 'center', margin: 'auto', padding: '20px', width: 400, }, heading: { fontSize: '34px', marginBottom: '10px', color: "green", borderBottom: "3px solid crimson", paddingBottom: 20, borderRadius: "8px", }, btn: { backgroundColor: 'green', fontSize: 20, color: 'white', cursor: 'pointer', margin: 10, padding: 15, borderRadius: "8px", border: "none", boxShadow: "0px 0px 10px 0px grey", }, }; |
Output:
How To Change Button Text On Click In React Example 2s
