React Change Icon on Click

React changes the appearance of an icon when a user clicks on it. For example, you might want to show an eye icon that toggles between open and closed states when the user clicks on it to reveal or hide a password input. In this article, we will learn how to change the icon on click in React, a popular JavaScript library for building user interfaces. We will use React Icons, a package that provides icons from various sources, such as Font Awesome, Material Design, and Bootstrap. We will also use React's onClick event handler to trigger a function that changes the icon state when the user clicks on it

written

reviewed

updated

How can I change the Icon of a Button in React js when it is clicked?

React Js Change Button Icon onClick: To change a button icon in React.js on click, you can use state and event handling. First, define a state variable to hold the icon name. Then, add an event handler to the button's onClick attribute. In the event handler function, update the state variable to the new icon name.

Finally, use conditional rendering to display the appropriate icon based on the state. When the button is clicked, the icon will change accordingly. Remember to import the necessary icons and utilize the appropriate CSS or component library for rendering the icons..

React Js Change Button icon on click Example

   <script type="text/babel">
        const { useState } = React;

        function App() {
            const [isIconClicked, setIsIconClicked] = useState(false);
            const [buttonColor, setButtonColor] = useState("#4caf50");

            const handleClick = () => {
                setIsIconClicked(!isIconClicked);
                setButtonColor(isIconClicked ? "#4caf50" : "#ff0000");
            };

            return (
                <div className='container'>
                    <h1>React Js Change button icon on click</h1>
                    <button onClick={handleClick} style={{ backgroundColor: buttonColor }}>
                        {isIconClicked ? <i className="mdi mdi-fullscreen-exit" /> : <i className="mdi mdi-fullscreen" />}
                    </button>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of Change Icon on Click React

Before Click

After Click

Pasted Image

How to Change Icon on Click in Javascript?

JavaScript can change the icon of a button or an element when the user clicks on it. This can be achieved using JavaScript, a scripting language that runs in the browser and can manipulate HTML elements and their styles. In this example, we will learn how to change the icon on click in JavaScript, using different methods and techniques. We will also see some examples of how to use JavaScript to change the icon on click for different scenarios and purposes.

Javascript Change Icon on click

<body>
    <div id="app">
        <h1>How to Change Icon on Click in Javascript</h1>
        <button id="toggleButton"><i class="mdi mdi-fullscreen"></i></button>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const toggleButton = document.getElementById("toggleButton");
            let isIconClicked = false;

            const handleClick = () => {
                isIconClicked = !isIconClicked;
                toggleButton.style.backgroundColor = isIconClicked ? "#ff0000" : "#4caf50";
                toggleButton.innerHTML = isIconClicked ? '<i class="mdi mdi-fullscreen-exit"></i>' : '<i class="mdi mdi-fullscreen"></i>';
            };

            toggleButton.addEventListener("click", handleClick);
        });
    </script>
   
</body>

Run

Releated Tutorials

👉 Vue Js Change Button Icon onClick