Handle multiple checkbox with input box in a map react js

Question

Hi i am trying to manage multiple checkbox with multiple input in same map can anyone tell me how can i do it here is my code the main problem is that when i try to add some input afterwards another ita takes wronge indexing

GetCryptoHtml = (criptoList) => {
return criptoList.map((value, i) => {
  return (
    <>
      <div className="col-md-3 col-12">
        <input
          className="checked"
          id={i + "checkbox"}
          type="checkbox"
          onChange={(e) => this.onChangeCheck(e, value, i)}
          name={"cryptoCurrency" + [i]}
          value={value.id}
        />{" "}
        <label for="vehicle1"> {value.name}</label>
      </div>
      <div className="col-md-9 col-12">
        <div className="form-group">
          {/* {
          checkingInput ? */}
          <input
            type="text"
            id={i + "percentage"}
            name={"percentage" + [i]}
            onChange={(e) => this.onChangeInputBox(e, i ,value.name)}
            value={this.state.percentage[i]}
            className="form-control"
          />
          {/* <input type="text" onChange={(e) => this.checkWordInput(e)} id="percentage[i]" name="percentage[i]" /> : <></> */}
          {/* } */}
        </div>
      </div>
      <br />
    </>
  );
});

And Here's the onChange function for both

  onChangeCheck = async (e, value, i) => {
var percentage = document.getElementById(i + "percentage").value;
if (e.target.checked) {
    this.setState({
        checkedCheck: true
    });
    this.state.data2.push(value.short_name);
    if (this.state.percentage[i] !== undefined) {
        this.state.percentage[i] = this.state.percentage[i];
    } else {
        this.state.percentage.push("");
    }
} else {
    this.setState({
        checkedCheck: false
    });
    this.state.data2.pop(value.short_name);
    this.state.percentage[i] = "";
}

this.setState({
    cryptoCurrency: "update"
});

Hacker Boy 404 · Accepted Answer · 2023-01-02 11:00:54Z

1

Maybe the issue you are facing is because of the indexing process from where i can see the problem is the your index value on change is setting by default 0 and everytime you add your input it takes one input back to add value in current section. You can check the indexing and current id if they both are matched and after then enter the value using event

answered Jan 2, 2023 at 11:00

Hacker Boy 404

386 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

TechnoDeveloper Over a year ago

I've tried using id indexing but every time I am adding new field the first value disappears

Hacker Boy 404 Over a year ago

It seems every time you add using your id you first have to check if your current array contain any source of data in state and after that you can add the existing data with your new array

Hacker Boy 404 Over a year ago

Or you can use Jquery to add your value on current value by using dynamic id parameter

TechnoDeveloper Over a year ago

Okay i can try using jquery. Thank you @Hacker Boy 404

Collectives™ on Stack Overflow

Handle multiple checkbox with input box in a map react js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related