How to set default Checked in checkbox ReactJS

Question

I m having trouble to update the checkbox state after it s assigned with default value checked  quot checked quot  in React  var rCheck   React createElement  input                 type   checkbox           checked   checked           value  true         Check here     After assigning checked  quot checked quot   I cannot interact the checkbox state by clicking to uncheck check

User · Answer

in addition to the correct answer you can just do  P   lt input name  remember  type  checkbox  defaultChecked  gt

User · Answer

lt div className  form-group  gt             lt div className  checkbox  gt               lt label gt  lt input type  checkbox  value    onChange  this handleInputChange bind this      gt Flagged lt  label gt               lt br   gt               lt label gt  lt input type  checkbox  value       gt Un Flagged lt  label gt             lt  div gt           lt  div      handleInputChange event    console log  event  event target checked         the Above handle give you the value of true or false upon checked or unChecked

User · Answer

I set the state as any   type  and in the constructor set the state to null   onServiceChange    e    gt        const  value    e target      const index   this state services indexOf value       const services   this state services filter item   gt  item     value       this setState prevState   gt             services  index     -1   prevState services push value   amp  amp  prevState services   this state services filter item   gt  item     value              In the input element   this onServiceChange e      this onServiceChange e      this onServiceChange e      this onServiceChange e      I figured it out after some time  Thought it might help y all

User · Answer

lt div className  quot display  lbl input quot  gt                 lt input                 type  quot checkbox quot                  onChange  this handleChangeFilGasoil                  value  quot Filter Gasoil quot                  name  quot Filter Gasoil quot                  id  quot  quot                  gt                 lt label htmlFor  quot  quot  gt Filter Gasoil lt  label gt               lt  div gt   handleChangeFilGasoil    e    gt        if e target checked           this setState               checkedBoxFG e target value                    console log this state checkedBoxFG            else       this setState           checkedBoxFG                   console log this state checkedBoxFG

User · Answer

Don t make it too hard  First  understand a simple example given below  It will be clear to you  In this case  just after pressing the checkbox  we will grab the value from the state initially it s false   change it to other value initially it s true   amp  set the state accordingly  If the checkbox is pressed for the second time  it will do the same process again  Grabbing the value  now it s true   change it to false   amp  then set the state accordingly now it s false again  The code is shared below    Part 1  state       verified  false      The verified state is now false   Part 2  verifiedChange   e   gt         e preventDefault    It s not needed   const   verified     e target    this setState       verified   this state verified    It will make the default state value false  at Part 1 to true              Part 3      lt form gt          lt input           type  checkbox            name  verified            id  verified            onChange  this verifiedChange     Triggers the function in the Part 2           value  this state verified          gt         lt label for  verified  gt         lt small gt Verified lt  small gt         lt  label gt     lt  form gt

User · Answer

To interact with the box you need to update the state for the checkbox once you change it  And to have a default setting you can use defaultChecked   An example    lt input type  checkbox  defaultChecked  this state chkbox  onChange  this handleChangeChk    gt

User · Answer

It s working   lt input type  checkbox  value  props key  defaultChecked  props checked  ref  props key  onChange  this checkboxHandler    gt    And function init it   this viewCheckbox   key   yourKey   text   yourText   checked  this state yourKey

User · Answer

You may pass  true  or    to the checked property of input checkbox  The empty quotes      will be understood as false and the item will be unchecked   let checked   variable     value    true         lt input      className  form-check-input      type  checkbox      value  variable      id  variable      name  variable      checked  checked    gt   lt label className  form-check-label  gt  variable  lt  label gt

User · Answer

If the checkbox is created only with React createElement then the property  defaultChecked is used   React createElement  input   type   checkbox   defaultChecked  false      Credit to  nash ag

User · Answer

Here s a code I did some time ago   it might be useful  you have to play with this line    this state     checked  false  checked2  true    class Componente extends React Component     constructor props        super props        this state     checked  false  checked2  true       this handleChange   this handleChange bind this       this handleChange2   this handleChange2 bind this             handleChange         this setState           checked   this state checked                     handleChange2         this setState           checked2   this state checked2                     render         const togglecheck1   this state checked    hidden-check1            const togglecheck2   this state checked2    hidden-check2             return  lt div gt           lt div gt           lt label gt Check 1 lt  label gt           lt input type  checkbox  id  chk1 className  chk11  checked   this state checked   onChange   this handleChange     gt           lt label gt Check 2 lt  label gt           lt input type  checkbox  id  chk2  className  chk22  checked   this state checked2   onChange   this handleChange2     gt         lt  div gt          lt div className   togglecheck1   gt show hide div with check 1 lt  div gt         lt div className   togglecheck2   gt show hide div with check 2 lt  div gt        lt  div gt          ReactDOM render     lt Componente   gt     document getElementById  container        CSS   hidden-check1     display  none          hidden-check2     visibility  hidden      HTML     lt div id  container  gt         lt  -- This element s contents will be replaced with your component  -- gt     lt  div gt    here s the codepen    http   codepen io parlop pen EKmaWM

User · Answer

I tried to accomplish this using Class component  you can view the message for the same       class Checkbox extends React Component  constructor props       super props      this state           checked true           this handleCheck this handleCheck bind this     handleCheck        this setState           checked  this state checked           render        var msg  quot   quot      if this state checked           msg  quot checked  quot       else          msg  quot not checked  quot            return           lt div gt               lt input type  quot checkbox quot               onChange  this handleCheck              defaultChecked  this state checked                gt               lt p gt this box is  msg  lt  p gt           lt  div gt

User · Answer

In the React rendering lifecycle  the value attribute on form elements   will override the value in the DOM  With an uncontrolled component    you often want React to specify the initial value  but leave   subsequent updates uncontrolled  To handle this case  you can specify   a defaultValue or defaultChecked attribute instead of value             lt input           type  checkbox            defaultChecked  true            gt    Or  React createElement  input   type   checkbox   defaultChecked  true      Please checkout more details regarding defaultChecked for checkbox below  https   reactjs org docs uncontrolled-components html default-values

User · Answer

If someone wants to handle dynamic data with multiple rows  this is for     handing dynamic data  You can check if the rowId is equal to 0  If it is equal to 0  then you can set the state of the boolean value as true  interface MyCellRendererState       value  boolean    constructor props            super props           this state                 value  props value   props value   false                    this handleCheckboxChange   this handleCheckboxChange bind this         handleCheckboxChange             this setState   value   this state value            render             const   value     this state          const rowId   this props rowIndex         if  rowId     0               this state                  value   true                     return               lt div onChange  this handleCheckboxChange  gt               lt input              type  quot radio quot               checked  this state value              name  quot print quot                gt              lt  div gt

User · Answer

There are a few ways to accomplish this  here s a few  Written using State Hooks  function Checkbox       const  checked  setChecked    React useState true      return        lt label gt         lt input type  quot checkbox quot          defaultChecked  checked          onChange       gt  setChecked  checked           gt        Check Me       lt  label gt          ReactDOM render     lt Checkbox   gt     document getElementById  checkbox        Here is a live demo on JSBin  Written using Components  class Checkbox extends React Component     constructor props        super props       this state           isChecked  true               toggleChange        gt        this setState         isChecked   this state isChecked                render         return          lt label gt           lt input type  quot checkbox quot            defaultChecked  this state isChecked            onChange  this toggleChange            gt          Check Me         lt  label gt                ReactDOM render     lt Checkbox   gt     document getElementById  checkbox        Here is a live demo on JSBin

User · Answer

this can be done with pure js                 lt Form Group controlId  categoryStatus  gt                   lt Form Check                   type  checkbox                    label  Category Status Active In-active                    onChange  this handleChecked                                     gt                 lt  Form Group gt         Load category to form   to edit   GetCategoryById id        this UpdateId   id     axios get  http   localhost 4000 Category edit     id         then response   gt            this setState             category name  response data category name            category description  response data category description            is active  response data is active                       response data is active    1   document getElementById  categoryStatus   checked   true   document getElementById  categoryStatus   checked   false                  catch function  error            console log error

User · Answer

In my case I felt that  defaultChecked  was not working properly with states conditions  So I used  checked  with  onChange  for toggling the state   Eg    checked  this state enabled  onChange  this setState  enabled    this state enabled

[reactjs] How to set default Checked in checkbox ReactJS?

Examples related to reactjs

Examples related to checkbox