How to handle multiple groups of radio button in react?

user_10135352 0
Viewed 915

So I'm getting some data from backend which looks something like this 

{"data":[{"status":1, "title":"Title 1"}, {"status":2, "title":"Title 2"}, {"status":1, "title":"Title 3"}, {"status":3, "title":"Title 4"}]}

They are to be mapped into a list where the value of status determines one of 3 radio buttons which I did like below

{data.map(d => {
    return (
       <ListGroupItem>
          <Row>
            {d.title}
            <FormGroup>
            <Input
               type="radio"
               name={d.title}
               value="1"
               checked={d.status === 1}
               onChange={this.changeHandler}
             />
             Open
             </FormGroup>
             <FormGroup check inline>
                <Input
                  type="radio"
                  name={d.title}
                  value="2"
                  checked={d.status === 2}
                  onChange={this.changeHandler}
                />
                In-progress
              </FormGroup>
              <FormGroup check inline>
                 <Input
                    type="radio"
                    name={d.title}
                    value="3"
                    checked={d.status === 3}
                    onChange={this.changeHandler}
                 />
                 Closed
               </FormGroup>
           </Row>
        </ListGroupItem>
   );
})}

So my list would look something like

Title 1      * open  0 in-progress  0 closed
Title 2      0 open  * in-progress  0 closed
Title 3      * open  0 in-progress  0 closed
Title 4      0 open  0 in-progress  * closed

(not the best way to show this)

Now I need this in a form so that when submitted the selected value will updated data in the backend. How would I go about doing that? Also how will I handel the onChange event since right now even if I select a radio button nothing will change.

changeHandler = e => {
   //map the data to the proper place
}

submitHandler = e => {
   //submit the data
}

P.S. I'm very new to React so this might not be the best way to do this. If there is a better way please let me know.

reactjs
1 Answers

Your approach is ok, but the change event haven't been handled the right way so the state won't update.

At first, I suppose that this is the shape of the state:

this.state = {
  data: [
    { title: "Title 1", status: 1 },
    { title: "Title 2", status: 2 },
    { title: "Title 3", status: 1 },
    { title: "Title 4", status: 3 }
  ]
};

Then the state can be updated as follow (heavily inspired from Redux)

handleChange = (event) => {
  this.setState({
    // the map method doesn't mutate the original array, it returns a new one
    data: this.state.data.map(item => {
      // iterate through the array to find the right item to update
      if (item.title !== event.target.name) {
        // not match, so we won't change anything here
        return item;
      } else {
        // match, we return the updated value
        return {
          title: item.title,
          // event.target.value is a string, but the state uses number so we have to convert it
          status: Number(event.target.value)
        };
      }
    })
  });
}

Finally, you can send the state when handling the submit event.

user_79201610
Related