## A react component that contains a checkbox with a `useState` hook.
The useState hook is a special function that lets us add state to a function component. It takes an initial value and returns a stateful value and a function to update it.
:::info
const [state , setState]= useState( initialValue )
:::
When the state is `false` checkbox is unchecked and when state is `true` then the checkbox is checked.
### **code:**
``` jsx
import React, { useState, useReducer } from "react";
import ReactDOM from "react-dom";
const Checkbox = ({ fnClick, fnChange, title = "", checked = false }) => (
<label>
<input
onClick={e => {
if (fnClick !== undefined) fnClick(e.target.checked);
}}
onChange={e => {
if (fnChange !== undefined) fnChange(e.target.checked);
}}
type="checkbox"
checked={checked}
/>
{" Checkbox " + title}
</label>
);
const Filtros = () => {
const initialState = {
click: false,
change: false
};
const reducer = (state, action) => ({ ...state, ...action });
const [state, setState] = useReducer(reducer, initialState);
const clearFilter = () => setState(initialState);
return (
<div className="App">
<button onClick={() => clearFilter()}>Limpiar</button>
<br />
<Checkbox
title="Click"
fnClick={v => setState({ click: v })}
checked={state.click}
/>
<br />
<Checkbox
title="Change"
fnChange={v => setState({ change: v })}
checked={state.change}
/>
<br />
click: {state.click ? "true" : "false"}
<br />
change: {state.change ? "true" : "false"}
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<Filtros />, rootElement);
```
In this example, we import the useState hook from the react library,also used reactDom. then we define a functional component called Checkbox that uses the useState hook to define a state variable Checked with an initial value of false.
``` html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
```
The state is a data or properties. states are mutable,their value can change and useState() hook is used to handle and manage your states.
The useState() hook allows you to create,track and update a state in functional components.
Sign in with Wallet
Connect another wallet