reactjs working with checkbox

Solutions on MaxInterview for reactjs working with checkbox by the best coders in the world

showing results for - "reactjs working with checkbox"
Alex
31 Apr 2017
1***** working with checkBox in reactjs Functional component **********
2
3const [languages, setLanguages] = useState([
4    { id: 1, value: 'Hindi', isChecked: false },
5    { id: 2, value: 'Gujarati', isChecked: false },
6    { id: 3, value: 'English', isChecked: false }
7  ]);
8
9const onSubmit = async (e) => {
10    //e.preventDefault();
11    try {
12
13      var formData = new FormData();
14      let language = [];
15      languages.map(lang => {
16        if (lang.isChecked) language.push(lang.value);
17      });
18      formData.append("Language", language);
19
20      console.log("abbc", typeof formData.get("Language"));
21
22      const res = await axios.post("api call", formDate);
23      history.push("/"); //any were you want
24    } catch (error) {
25      if (error.response) {
26        setData(error.response.data.msg);
27      } else {
28        setData(error.message);
29      }
30      console.log("error", error);
31    }
32  };
33
34const handleCheckboxChecked = (event) =  {
35    let language = languages;
36    language.forEach((lang) => {
37      if (lang.value === event.target.value)
38        lang.isChecked = event.target.checked;
39    });
40    setLanguages(language);
41  }
42
43return (
44    <div className="container">
45  // working with image try enctype= form data
46<form onSubmit={handleSubmit(onSubmit)} enctype="multipart/form-data" >
47       <div>
48            {languages.map((language) => {
49                return (
50                  <li type="none" key={language.id}>
51                    <input type="checkbox" name={language.value} value={language.value}
52                      onChange={(handleCheckboxChecked)} />
53                    <label htmlFor={language.value} className="ml-2">{language.value}</label>
54                  </li>
55                );
56              })}
57       </div>
58          <button type="submit" className="btn btn-primary btn-block">
59            Login
60          </button>
61        </form>
62    </div>
63  );
64
65
queries leading to this page
react js cheched checkbox when click buttonreact javascript check checkbox when button clickhow to check performce for a checkbox reactupdate checkbox in reactreact checkbox objectscheckbox react updtaecomplete checkbox reactreact checkbox propscheckbox event in react jscheckbox button example in reactcheck checkbox by id reactinput checkbox react jsreact handle checkboxcheck box reactreact checkboxes formcheckbox react jsdisplay a checkbox values in reactreact checkbox clickcreate checkbox in reactcheck a checkbox react jsgenerate new checkboxes in react jshow to use checkbox in react jscheckbox formulaire react js componentscheckbox in reacthow to use checkbox in reactchechbox in reactjsreact checkbox javascript onchangehow to add checkbox options in react rendercheckbox in react compoenentwhen check checkbox print data react jsclick checkbox react react handle checkboxescheckbox state in react using eventreact checkbox componentcheckboxes reacthow to checkbox in react jsreact checkbox inputcheckboxes in reactreact input checkbox componentvalidation for checkbox in reactreact bouncy checkboxhow to make a complete checkbox react jshow to work with checkbox in reactinput checkbox reactjsuse checkbox data react jsreact checkbox attributeshow to make a checkbox in reactadd a checkbox in reactreact input checkbox examplerender checkbox in reactcheckbox with label in react jsdisplay component as checkbox label reacthow to check a checkbox in reactinput checkbox react fromrun a script on checking a checkbox in reactreact get checkboxcheckbox validation in react jsvalor checkbox reactreact js checkboxcheckbox reactcheckbox reactjsuse through checkbox reactreact checkbox onuncheckhow to add checkbox inside the display table reactjsinput checkbox react and labelreact checkbox list componentcheckbox handling in reacthow to implement checkbox in react jscheckbox check reactreact checkbox form examplecheckbox event reactchekbox all reactjsuse checkbox data in reacthow to create a checkbox in reactcheckbox list reacthow to create checkbox input in react 3fcheckbox filter reactreact checkbox statereact checkbox npmhandle input checkbox in reactworking with checkbox in reactways to implement checkbox in react jsforms with checkboxes in reacthow to style checkbox in reactreact checkbox evemtsubmitting checkboxes in reactreact checkbox list itemget checkbox value in reactjsreact checkbox valueshandle checkbox in reactcheckbox formulaire react js exampleoncheck checkbox react jsvalidate checkbox reactsimple checkbox in react js formcheck checkboxes in reactimport checkbox in reactreact input checkboxhow to select the checkbox in react checkbox in react jscheckbox example in react jshandle checkbox in reactjs using statecheckbox state handling reactreact collect checkboxeshow to add checkbox list in react jsinput onclick checkbox reactcheckbox label reactcheckbox react js examplereact form checkbox validationreactjs working with checkboxcheckbox reacttuse checkbox in reactjavascript react checkboxcheckbox react codebox examplereact html checkboxreact checkbox classcheckbox with react jshow to show checkbox data in react jstargetting checkboxes in reactreact form checkbox examplehandle checkbox click in reactinput checkbox reactreact checkbox in tablecheckbox button in reactreact checkboxescreate checkbox for reactjscheckbox valor reactcheckbox input reactcreate checkbox element reactreact checkbox class exampleinput checkbox button example in reactreact collase checkbox examplecheckbox handler reactreact list of checkboxescheck checkbox on button click reactexample checkbox in list with react js and datareact checking a checkbox if inputadd checkbox in react jshow to implement checkbox update in react jscheckbox react js componentsreact js check checkbox when button clickcheckbox event in reacthow to add checkbox in react jsusing checkbox in reactcheckbox component reactto create a checkbox in reactreactjs checkboxcheckbox example in reactjs overflowreact checkbox component createreact checkboxgenerate new checkboxes from checkboxes react jsreact checkbox on checkcheckbox in react js statehandling checkbox reacthow to create a checkbox in react jscheckbox in react js formhandle checkbox reactreact cheboxlabel checkbox javascript reactreact how to handle checkbox formcheckbox react stateget checkbox value in react jslist of checkbox reactcheckbox reathow to check performce for a checkbox reactrender checkbox reactcheckbox handle in reactcheckbox import reactcheckbox in react js examplereact checkbox eventhow to handle input checkbox in react jshow to listen checkbox in react jsreact checkbox listhow to create checkbox in react jsreact check boxshow checkbox selected react sjreact checkbox component npmhow to handle checkbox in reacthow to create checkbox in react react checkbox examplecheckbox i reactworking with checkbox in reactjs functional componentreactjs working with checkbox