How To Set The Default Checked Value For A Checkbox In React

If you create an input tag with a type checkbox or ratio by JSX sometime, you will want to set the default checked value of a checkbox in React. So how to do it? Let’s go into detail.

Set the default checked value of a checkbox in React

Solution 1: Input tag has a prop called ‘defaultChecked’

The input tag has a prop called ‘defaultChecked’. It will help you to solve the problem. The set default value is False, but if you change it to true, it looks like this: `defaultChecked={true}.` The checkbox will be checked by default. But defaultChecked prop only supported by input type is ‘checkbox’ or ‘ratio.’

Example :

import "./App.css";
 
function App() {
  return (
    <div className="App">
      <h1>What is your favourite food</h1>
      <label htmlFor="subscribe">
        <ul>
          <li>
            <input type="checkbox" defaultChecked={true} />
            Steam Rice
          </li>
          <li>
            <input type="checkbox" />
            Chicken
          </li>
          <input type="checkbox" />
          Pork
        </ul>
      </label>
    </div>
  );
}
 
export default App;

Output :

Solution 2: Using constant to pass in defaultCheck

You can also create many ways to play with ‘defaultCheck’ prop. You can use the useState() hook and pass in ‘true’ and add some conditions to set false.

UseState() method can use like this:

import { useState } from "react";
const {value , setValue} = useState(valueInit)

• With value is the current state value.
• SetValue is a function that used to update the state.
• ValueInit is the value that you initial.

You can read more about useState() method here.

Example:

import "./App.css";
import { useState } from "react";
function App() {
  let { checked, setChecked } = useState(false);
const checkCondition = ()=>{  
if (checked) {t
    setChecked(true)
  }}
  return (
    <div className="App">
      <h1>What is your favourite food</h1>
      <label htmlFor="subscribe">
        <ul>
          <li>
            <input type="checkbox" defaultChecked={checked} />
            Steam Rice
          </li>
          <li>
            <input type="checkbox" defaultChecked={!checked}/>
            Chicken
          </li>
          <input type="checkbox" defaultChecked={checked}/>
          Pork
        </ul>
      </label>
    </div>
  );
}
 
export default App;

Here I create a useState hook that value store boolean value as true or false. And I created a function checkCondition that will check if the checked value is false and set it to true. You can also use another condition suitable for your purpose. Then I pass checked to defaultChecked prop. So that Steam Rice and Pork will always be checked by default. And Chicken is oppositionHere I create a useState hook that value store boolean value as true or false. And I created a function checkCondition that will check if the checked value is false and set it to true. You can also use another condition suitable for your purpose. Then I pass checked to defaultChecked prop. So that Steam Rice and Pork will always be checked by default. And Chicken is opposition

Summary

In this tutorial, I showed you how to set the default checked value of a Checkbox in React. You can use ‘defaultCheck’ prop and set it to true.

Maybe you are interested:

• Adding Types to Events in React using TypeScript
• Handle the onKeyPress event in React
• Toggle a class on click in React

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm