In traditional HTML forms, the information is sent to the server when a ‘submit’ button is clicked. However, modern websites often benefit from a more seamless experience.

Checkboxes are an example of an element that would traditionally be included as part of a form. In this tutorial, we’ll learn how to utilize React Checkboxes’ ‘onChange’ event handler to call functions without explicitly pressing ‘submit’.

Below is a simple example of a React checkbox using the ‘onChange’ event handler:

/* Create a checkbox functional component. onChange, log a message to the console. */ function Checkbox() { const handleChange = () = { console.log('The checkbox was toggled'); }; return ( <div> <input type="checkbox" onChange={handleChange} /> </div> ); }; export {Checkbox};

The example above will log a message to the console when the checkbox is toggled.

The above code is great for when we just want to use the ‘onChange’ event by itself. However, if we want to actually get the value of the checkbox (toggled or not), we have to add some more code.

Using ‘setState’ with React Checkbox ‘onChange’

In React, the best way to do this is via the ‘useState’ hook. This is different from normal JavaScript because we are unable to access the value of the checkbox directly from its DOM component:

/* Create a checkbox functional component. Toggle the text of a paragraph with the checkbox using the 'useState' hook. */ import React, {useState} from 'react'; function Checkbox() { const [checked, setChecked] = useState(false); const handleChange = () = { setChecked(!checked); }; return ( <div> <input type="checkbox" checked={checked} onChange={handleChange} /> <p> {checked ? 'Checked' : 'Not checked'} </p> </div> ); }; export {Checkbox};

Let’s walk through the above code.

First, we are importing the ‘useState’ hook.

Next, we are creating our ‘Checkbox’ component, which will toggle the text of a paragraph via the ‘onChange’ event, which is bound to the checkbox. The ‘setChecked’ method is used to change the state of the ‘checked’ variable.

Finally, we return the checkbox, which can be toggled on and off to change the text within the paragraph.

The above example toggles text within a paragraph when the checkbox is checked and unchecked.
The checkbox only has two states. When we check it, we know that we want the paragraph’s text to switch to the one not currently in use.

Now, we will use information from the event to perform more complex operations.


Using Multiple Checkboxes

The below code will utilize a combination of a few different checkboxes to deliver a result to the user.

We’ll first rewrite the component we just created to use props to determine what values to use for the on and off states of the checkbox. This will allow us to modularize the component.

/* Rewrite the above component to use props instead. */ import React, {useState} from 'react'; function Checkbox(props) { const [checked, setChecked] = useState(false); const checkedText = props.onText; const uncheckedText = props.offText; const togglePreference = props.togglePreference; const animal = props.animal; const handleChange = () = { setChecked(!checked); togglePreference(animal); }; return ( <div> <input type="checkbox" checked={checked} onChange={handleChange}> <p> {checked ? checkedText : uncheckedText} </p> </div> ); }; export {Checkbox};

Using props to determine the text that gets displayed when the checkbox gets toggled allows us to create many different checkboxes with minimal effort.

In addition to using props for our display text, we use props to take in a callback which we will use to compile all the checkboxes’ data. It’ll make more sense when we have the code in App.js.


Using Children Checkboxes to Change Parent Variables

With our checkbox component defined, we’ll now create multiple checkboxes, using their values to set a variable in the parent element. In doing so, we will demonstrate how multiple buttons can be used together in an application.

In App.js:

import { useState } from 'react'; import { Checkbox } from './Checkbox.js'; function App() { const [likings, setLikings] = useState("") const [preferences, setPreferences] = useState( { 'cats': false, 'dogs': false, 'pigs': false } ) function togglePreference(animal) { preferences[animal] = !preferences[animal]; // Update animal likings let newLikings = ""; for ( var animal in preferences ) { if ( preferences[animal] ) { newLikings += animal + " "; } } setLikings(newLikings); } return ( <div> <Checkbox onText="You are a cats person" offText="You are not a cats person" togglePreference={togglePreference} animal="cats" /> <Checkbox onText="You like dogs" offText="You don't like dogs" togglePreference={togglePreference} animal="dogs" /> <Checkbox onText="Pigs make you happy" offText="Pigs don't make you happy" togglePreference={togglePreference} animal="pigs" /> <h1> My analysis of you: You like {likings} </h1> </div> ) } export default App;

There’s a lot to unpack here! We first use ‘useState’ to set two state variables, ‘likings’ and ‘preferences’. We set ‘likings’ to an empty string and ‘preferences’ to an object setting all the animal types to ‘false’.

Then we define the ‘togglePreference’ function. This function takes an animal type and sets ‘preferences’ to either true or false for that animal type. Then it updates the state of the ‘likings’ state variable to match the ‘preferences’ state variable.

We do this so that we can pass ‘togglePreference’ into our Checkbox components as a callback. On its own, our Checkbox component has no way to access its parent element, so we have to explicitly pass in the callback to allow it to change our ‘likings’ string.

We then return three different checkboxes, each with a unique variable to set within our ‘preferences’ object.

Let’s go over Checkbox.js one more time to make sure that the part with the callback makes sense. We’ll take a look at only the function itself:

function Checkbox(props) { const [checked, setChecked] = useState(false); const checkedText = props.onText; const uncheckedText = props.offText; const togglePreference = props.togglePreference; const animal = props.animal; const handleChange = () = { setChecked(!checked); togglePreference(animal); }; return ( <div> <input type="checkbox" checked={checked} onChange={handleChange} /> <p> {checked ? checkedText : uncheckedText} </p> </div> ); };

Pay attention to the ‘togglePreference’ variable that we set to ‘props.togglePreference’. From our code in App.js, we know that this variable is being set to a function held by the parent element.

With this callback, the checkbox component can modify variables in the parent element despite having no other connection with it. Thus, in the function ‘handleChange’, we call the ‘togglePreference’ function on the checkbox’s ‘animal’, modifying the ‘preferences’ variable in the parent element.

We see the result below:

As we can see, the child elements are able to set the contents rendered by the parent.

That’s it for React Checkbox onChange! Please leave any questions or comments below.

👋 Hey, I'm Jesse Ryan Shue
I am a Full-Stack Developer and an Industrial/Mechanical Designer. I have work experience in Industrial Design, 3D printing, and teaching. I am experienced in Python, JavaScript, and SolidWorks CAD. Follow me on LinkedIn

💬 Leave a comment

Your email address will not be published. Required fields are marked *

We will never share your email with anyone else.