How to set value for the checkbox in ReactJS

Question

I try to show my value using checkbox. Value always comes for the console log. But it didn't set for the checkbox. Here is the code and image for my problem:

     var NotePage = createClass({
 

      addTags(e) {
        console.log("id****************", e.target.id);
        let id = e.target.id;
        let selectedTags = this.state.selectedTags;
        if (selectedTags.includes(id)) {
          var index = selectedTags.indexOf(id)
          selectedTags.splice(index, 1);
        } else {
          selectedTags.push(id);
        }
        console.log("id****************selectedTags", selectedTags);

        this.setState({
          selectedTags: selectedTags
        })

       },







     render: function () {
       assignStates: function (note, token, tagCategories) {
   
           let fields = [];
           fields["title"] = note.title_en;
           fields["body"] = note.body_en;
           let selectedFileName = null
   
           if (note.file_url_en != "") {
             console.log("note.file_url_en ", note.file_url_en);
             selectedFileName = note.file_url_en
   
           }
           let selectedTags = [];
           let n = 0;
           (note.note_tag).forEach(tag => {
             selectedTags.push(tag.id.toString());
             n++;
           });
   
           console.log("id****************first", selectedTags);
   
           let initial_values = {
             note: note,
             id: note.id,
             api: new Api(token),
             message: "",
             title: note.title_en,
             body: note.body_en,
             fields: fields,
             isEdit: false,
             selectedTags: selectedTags,
             tagCategories: tagCategories,
             selectedFileName: selectedFileName,
           }
           return initial_values;
       },
   
       const { selectedTags } = this.state;
             {(tagCategory.tags).map((tag) => (
                           <div className="col-3">
                             <div>
                               <input
                                 type="checkbox"
                                 value={selectedTags.includes(tag.id)}
                                 id={tag.id}
                                 onChange={this.addTags} />
                               <label style={{ marginLeft: "10px", fontSize: "15px" }}>
                                 {tag.name_en}
                               </label>
                             </div>
                           </div>
              ))
      }
   })

Image related for the problem

Where is your addTags function?

Sinan Yaman
– Sinan Yaman

2021-08-23 06:06:56 +00:00
Commented Aug 23, 2021 at 6:06 — Sinan Yaman
– Sinan Yaman, Commented Aug 23, 2021 at 6:06
Sorry I will added it.

D-Nis
– D-Nis

2021-08-23 06:10:53 +00:00
Commented Aug 23, 2021 at 6:10 — D-Nis
– D-Nis, Commented Aug 23, 2021 at 6:10
@Sinan Yaman can you please check it now

D-Nis
– D-Nis

2021-08-23 06:20:16 +00:00
Commented Aug 23, 2021 at 6:20 — D-Nis
– D-Nis, Commented Aug 23, 2021 at 6:20

Drew Reese · Accepted Answer · 2021-08-23 06:27:39Z

You've an issue with state mutation. You save a reference to the current state, mutate it, and then save it back into state. This breaks React's use of shallow reference equality checks during reconciliation to determine what needs to be flushed to the DOM.

addTags(e) {
  let id = e.target.id;

  let selectedTags = this.state.selectedTags; // reference to state

  if (selectedTags.includes(id)) {
    var index = selectedTags.indexOf(id)
    selectedTags.splice(index, 1); // mutation!!
  } else {
    selectedTags.push(id); // mutation!!
  }

  this.setState({
    selectedTags: selectedTags // same reference as previous state
  });
},

To remedy you necessarily return a new array object reference.

addTags(e) {
  const { id } = e.target;

  this.setState(prevState => {
    if (prevState.selectedTags.includes(id)) {
      return {
        selectedTags: prevState.selectedTags.filter(el => el !== id),
      };
    } else {
      return {
        selectedTags: prevState.selectedTags.concat(id),
      };
    }
  });
},

Erfan · Accepted Answer · 2021-08-23 06:11:45Z

Use the "checked" attribute.

                         <input
                          type="checkbox"

                          value={tag.id}
                          checked={selectedTags.includes(tag.id)}
                          id={tag.id}

                          onChange={this.addTags} />

also, about the value attribute in checkboxes:

A DOMString representing the value of the checkbox. This is not displayed on the client-side, but on the server this is the value given to the data submitted with the checkbox's name.

Note: If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g. value=unchecked); the value is not submitted to the server at all. If you wanted to submit a default value for the checkbox when it is unchecked, you could include an inside the form with the same name and value, generated by JavaScript perhaps.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value

Saugat · Accepted Answer · 2021-08-23 06:16:51Z

0

I think you should use checked property instead of value.

For reference check react js docs here

answered Aug 23, 2021 at 6:16

Saugat

213 bronze badges

Comments

Sinan Yaman · Accepted Answer · 2021-08-23 06:26:41Z

0

You are mutating state variable directly with selectedTags.splice(index, 1); and selectedTags.push(id);

What you need to do is make a copy of the state variable and change that:

      addTags(e) {
        let id = e.target.id;
        if (this.state.selectedTags.includes(id)) {
          this.setState(state => (
            {...state, selectedTags: state.selectedTags.filter(tag => tag !== id)}
          ))
        } else {
          this.setState(state => (
            {...state, selectedTags: [...state.selectedTags, id]}
          ))
        }
       }

answered Aug 23, 2021 at 6:26

Sinan Yaman

5,9562 gold badges21 silver badges40 bronze badges

5 Comments

Sinan Yaman Over a year ago

This is your code, you can replace your addTags function with this. Or, if you can create a codesandbox example, I will make it work. Either this or @DrewReese 's solution should work. Do you get an error?

D-Nis Over a year ago

no errors coming but the checkbox still not ticking

Sinan Yaman Over a year ago

You also need to use checked = {selectedTags.includes(tag.id)} instead of value, as others mentioned.

D-Nis Over a year ago

yes I used with that part but it did't work

Sinan Yaman Over a year ago

Then problem should be somewhere else, can you create a codesandbox?

Collectives™ on Stack Overflow

How to set value for the checkbox in ReactJS

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related