What's the best way to store values of multiple radioGroups in state of controlled component?

Question

Total newbie to React.I'm building a multi-step form with a step counter in the State and Switch statement in the original render method to show what component is displayed. Similar to the tutorial on https://www.youtube.com/watch?v=zT62eVxShsY. I'm also storing all the values entered by the user in the state via props.

There's a page where the user is meant to pick a rating from 1,2,3 from multiple radioGroups to select values from the corresponding question. Like a survey! And these radioGroups change depending on which form the user decides to fill out.

I want to know the best way to store the values from the radioGroups into the state so I can destructure them in later stages/steps.

So far I've got the following code(basically just the UI). I've removed most of the radioGroups to simplify the code for this purpose, there are hundreds to be added. Pardon the poor indentation below copy-paste was a pain somehow

import React, { Component } from "react";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import AppBar from "material-ui/AppBar/AppBar";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import RaisedButton from "material-ui/RaisedButton";
import RadioGroup from "@material-ui/core/RadioGroup";
import Radio from "@material-ui/core/Radio";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import ActionFavorite from "material-ui/svg-icons/action/favorite";
import ActionFavoriteBorder from "material-ui/svg-icons/action/favorite-border";

export class LessonOne extends Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
  }

  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };

  handleChange = (event, index, value) => this.setState({ value });

  render() {
    return (
      <MuiThemeProvider>
        <React.Fragment>
          <AppBar title="Select Ratings" />

          <div style={{ padding: 50 }}>
            <Grid container spacing={1}>
              <Grid item xs={12}>
                <h1>Lesson 01_105CPL(H) Effects of Controls</h1>
              </Grid>
              <Grid item xs={12}>
                <h3>Lesson Content (Elements & Performance Criteria)</h3>
              </Grid>
              <Grid item xs={7} style={{ marginTop: 32 }}>
                Condition 1
              </Grid>
              <Grid item>
                <RadioGroup
                  name="C2.1(a)"
                  defaultValue={this.formRating({ rate })}
                  style={{ display: "flex", flexDirection: "row" }}
                >
                  <FormControlLabel
                    value="1"
                    control={<Radio color="primary" />}
                    label="1"
                    labelPlacement="Top"
                  />
                  <FormControlLabel
                    value="2"
                    control={<Radio color="primary" />}
                    label="2"
                    labelPlacement="Top"
                  />
                  <FormControlLabel
                    value="3"
                    control={<Radio color="primary" />}
                    label="3"
                    labelPlacement="Top"
                  />
                  <FormControlLabel
                    value="N/A"
                    control={<Radio color="primary" />}
                    label="N/A"
                    labelPlacement="Top"
                  />
                </RadioGroup>
              </Grid>
              <Grid item xs={7} style={{ marginTop: 10 }}>
                {" "}
                Condition 2
              </Grid>{" "}
              <Grid item>
                <RadioGroup
                  name="C2.2(b)"
                  defaultValue="3"
                  style={{ display: "flex", flexDirection: "row" }}
                >
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="1"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="2"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="3"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="N/A"
                    control={<Radio color="primary" />}
                  />{" "}
                </RadioGroup>
              </Grid>
              <Grid item xs={7} style={{ marginTop: 10 }}>
                Condition 3
              </Grid>{" "}
              <Grid item>
                <RadioGroup
                  name="C2.2(a)"
                  defaultValue="3"
                  style={{ display: "flex", flexDirection: "row" }}
                >
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="1"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="2"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="3"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="N/A"
                    control={<Radio color="primary" />}
                  />{" "}
                </RadioGroup>
              </Grid>
              <Grid item xs={7} style={{ marginTop: 10 }}>
                {" "}
                Condition 4{" "}
              </Grid>{" "}
              <Grid item>
                <RadioGroup
                  name="H1.3(c)"
                  defaultValue="3"
                  style={{ display: "flex", flexDirection: "row" }}
                >
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="1"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="2"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="3"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="N/A"
                    control={<Radio color="primary" />}
                  />{" "}
                </RadioGroup>
              </Grid>
              <Grid item xs={10} style={{ marginTop: 50 }}>
                <RaisedButton
                  label="Previous"
                  secondary={true}
                  onClick={this.back}
                />
              </Grid>
              <Grid item xs={2} style={{ marginTop: 50 }}>
                <RaisedButton
                  label="Next"
                  primary={true}
                  onClick={this.continue}
                />
              </Grid>
            </Grid>
          </div>
        </React.Fragment>
      </MuiThemeProvider>
    );
  }
}

export default LessonOne;

Please don't add tags that are irrelevant to the question, e.g. `atom-editor`. It might your editor of choice, but your question is not in the scope of the editor. See [What are tags, and how should I use them?](https://stackoverflow.com/help/tagging) for further reading.. — idleberg, Jul 28 '19 at 09:29

score 0 · Answer 1 · answered Jul 28 '19 at 02:46

0

For every RadioGroup you need to have a onChange event handler, also you need to simplify the name of RadioGroup (don't use any special character's except (_) underscore), it is good to use camelCase name.

<RadioGroup
    name="C2_1_a" //Simplifies name, you can change to whatever you want
    defaultValue={this.formRating({ rate })}
    style={{ display: "flex", flexDirection: "row" }}
    onChange={this.radioHandler} //onChange handler
>
// Your radio buttons                
</RadioGroup>

The the radioHandler function should be,

radioHandler = (e) =>{
   this.setState({[e.target.name]:e.target.value});
}

Accessing of selected radio button,

{this.state.C2_1_a}

answered Jul 28 '19 at 02:46

ravibagul91

20,072
5
36
59

Thanks @ravibagul91! But my issue is around how to store the values in a state object, possibly in a 2d nested array and access it from the defaultValue and onChange methods. My state has an object called formRating and depending on what form the user selects (from 100's of forms with different sets of conditions against radioGroups) the condition ID and the rating the user provided must be saved on this formRating object in state so that i can utilise that in later stages (i.e display in a PDF doc). Apologies I might be missing something obvious. Appreciate any and all help! – Dworo Jul 29 '19 at 03:10
What is the structure of your nested state? – ravibagul91 Jul 29 '19 at 03:34
so i added a button to update the state object formRatings onClick which updates the formRating as follows. formRating: Array[1] 0: Array[22] 0:{…} condId: "C2.1(a)" rate: "3" 1:{…} 2:{…} Now I want to know how to change the value of rate property of the given condId. the condId is determined by the name of the radioGroup – Dworo Aug 02 '19 at 03:30
This is not in scope of this question, you need to ask a separate question for this. This may help you - https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react – ravibagul91 Aug 02 '19 at 03:45

What's the best way to store values of multiple radioGroups in state of controlled component?

1 Answers1