Languages
[Edit]
EN

React - checkbox example

3 points
Created by:
Dirask Community
1700

In this article we would like to show you how to use checkbox in React.

Below example shows a form as a functional component with a single checkbox and submit button.

We use useState hook to store boolean agreement state and setAgreement function to modify it.
By default the agreement value is set to false.

Quick solution:

// ONLINE-RUNNER:browser;

//import React from 'react';
   
const Form = props => {
  const [agreement, setAgreement] = React.useState(false);
  const handleChange = e => setAgreement(e.target.checked);
  const handleSubmit = e => {
	e.preventDefault();
	console.log(`checked: ${agreement}`);
  };
  return (
	<form onSubmit={handleSubmit}>
	  <div>
		<label>
		  <input type="checkbox" checked={agreement} onChange={handleChange} />
		  <span>Consent to the data processing</span>
		</label>
	  </div>
	  <button type="submit">Submit</button>
	</form>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<Form />, root );

ReactJS

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - friendly IT community for everyone.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join