Image from

While learning React.js I’ve used this component multiple times to develop different kinds of projects. On this occasion, I’m going to show you how to toggle between two images/icons (stars). It’s going to be perceived as if one star in “on” or “active” when clicked and when clicked again is “off” or inactive. This toggle is the first step, for example, on creating a “add to favorites” component.

Creating our new React app

The first thing we want to do is create our new react app:

This instruction creates a template of a React application with the name of toggle-images.


Mary Sallent

Making React Functional Component tutorials that made transitioning as a Software Engineer easier. Useful Components that you can reference more than once.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store