---
# System prepended metadata

title: PID-1187

---

## 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.