EN
React - checkbox example
3
points
In this article, we would like to show you how to use a 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.
Quick solution:
// ONLINE-RUNNER:browser;
//Note: Uncomment import lines during working with JSX Compiler.
//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 );
Note:
Go to this article to see class component example.