Verify that One Radio Button in Every Div has been Selected In React

Question

I have a series of multiple choice questions. Each answer option is implemented as a radio button. I would like, when the user has selected an answer/radio button for every question in the quiz to display a pie chart.

This is what I have so far (please mind the uppercases, I'm using Emotion)

class Budget extends React.Component {
    state = {
      studentLoanPayment: 0,
      emergencyfund: 0,
      401k: 0
    };

    handleInputChange = event => {
        const { name, value } = event.target;
        console.log(name, value, event.target)

        this.setState({
          [name]: value,
          selected: event.target.id
        });
    };

    render() {
      const {
          studentLoanPayment,
          emergencyfund,
          401k
      } = this.state;


        return (
          <div>
              <UL>
                  <Li>
                      <h4>
                          How much money should Leif put towards student loans
                          each month?
                      </h4>
                  </Li>
                  <li>
                              <Label>
                                  <input
                                      id="q00"
                                      type="radio"
                                      name="studentLoanPayment"
                                      value="400"
                                      onChange={this.handleInputChange}
                                  />
                                  400
                                 {this.state.selected === "q00" && <DynamicText>hidden op1 text</DynamicText>}
                              </Label>
                  </li>
                  <li>
                              <Label>
                                  <input
                                      id="q01"
                                      type="radio"
                                      name="studentLoanPayment"
                                      value="500"
                                      onChange={this.handleInputChange}
                                  />
                                  500
                                  {this.state.selected === "q01" && <DynamicText>hidden op1 text</DynamicText>}
                              </Label>
                  </li>
                  <li>
                    <Label>
                      <input
                        id="q02"
                        type="radio"
                        name="studentLoanPayment"
                        value="200"
                        onChange={this.handleInputChange}>
                      </input>
                      200
                      {this.state.selected === "q02" && <DynamicText>hidden op1 text</DynamicText>}
                    </Label>
                 </li>
              </UL>
              <UL>
                  <li>
                      <h4>
                          How much money should Leif put towards an emergency fund?
                      </h4>
                  </li>
                  <li>
                              <Label>
                                  <input
                                      id = "q10"
                                      type="radio"
                                      name="emergencyfund"
                                      value="1,000"
                                      onChange={this.handleInputChange}
                                  />
                                  1,000
                                  {this.state.selected === "q10" && <DynamicText>hidden op1 text</DynamicText>}
                              </Label>
                  </li>
                  <li>
                              <label>
                                  <input
                                      id = "q11"
                                      type="radio"
                                      name="emergencyfund"
                                      value="200"
                                      onChange={this.handleInputChange}
                                  />
                                  200
                                  {this.state.selected === "q11" && <DynamicText>hidden op1 text</DynamicText>}
                              </label>
                  </li>
                  <li>
                  <Label>
                      <input
                        id = "q12"
                        type="radio"
                        name="emergencyfund"
                        value="0"
                        onChange={this.handleInputChange}/>
                      0
                      {this.state.selected === "q12" && <DynamicText>hidden op1 text</DynamicText>}
                    </Label>
                 </li>
              </UL>

              <UL>
                  <li>
                      <h2>
                          How much money should Leif put towards their 401(k)?
                      </h2>
                  </li>
                  <li>
                              <label>
                                  <input
                                      type="radio"
                                      name="401k"
                                      value="400"
                                      onChange={this.handleInputChange}
                                  >
                                  </input>
                              </label>
                  </li>
                  <li>
                              <label>
                                  <input
                                      type="radio"
                                      name="401k"
                                      value="500"
                                      onChange={this.handleInputChange}
                                  >
                                  </input>
                              </label>
                  </li>
                  <li>
                    <input
                      type="radio"
                      name="401k"
                      value="200"
                      onChange={this.handleInputChange}>
                    </input>
                 </li>
              </UL>

              <VictoryPie
                  colorScale="green"
                  data={[
                    {x: "Student Loans", y: this.state.studentLoanPayment},
                    {x: "Emergency Fund", y: this.state.emergencyfund}
                  ]}
                  labels={d => `${d.x}: ${d.y}%`}
                  style={{ parent: { maxWidth: '50%' } }}
              />
          </div>


        );
    }
}

Is there a way in react to go through all the radio buttons in a certain div (or in this case a ul) ? That way I could loop through them and make sure one is selected. And then perhaps loop through all the uls in the document (in other words - loop through all the questions in the quiz)

Answer 1

Yes, there is a way to do that. if you were to structure your data, you would make it far easier.

E.g. you could do something like this:

const data = {
  questions: [
    {
      id: 'q00',
      accessor: 'studentLoanPayment',
      value: 400,
    },
    {
      id: 'q01',
      accessor: 'studentLoanPayment',
      value: 500,
    },
    {
      id: 'q10',
      accessor: 'emergencyFund',
      value: 1000,
    },
    {
      id: 'q11',
      accessor: 'emergencyFund',
      value: 200,
    },
    {
      id: 'q20',
      accessor: '401k',
      value: 500,
    },
  ],
  selectedQuestions: {},
};

Of course the data should be in your state(e.g. you get it from some api and load it on componentDidMount). Then map through them and display them as desired.

Note that you should use selectedQuestions to fill in the question selected by the user based on their accessor. For example,

- How much money should Leif put towards student loans
                          each month?
User selects q01 => your: 
data = {
   questions: [...],
   selectedQuestions: { q01: true }
}

And so forths. Hope that helps!