0

I am making a multiple choice quiz. For every question, each option is implemented as a radio button.

When a user selects an option, I'd like to display text associated with the specific option they choose.

So far, I've been able to implement the radio buttons and handle an onChange event. However, I don't know how to display certain text when one option is chosen (and hide the others).

import React from 'react';
import styled from '@emotion/styled'

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

handleInputChange = event => {
    const { name, value } = event.target;
    console.log(name, value, event.target)
    this.setState({ [name]: value });
    /* the below code does not work
    var parent = event.target.parent;
    parent.find('DynamicText').show(); 

   */
};

render() {
  const {
      studentLoanPayment
  } = this.state;

  const totalMonthsDisplay = studentLoanPayment;

    return (
      <div>
          <UL>
              <Li>
                  <h4>
                      How much money should Leif put towards student loans
                      each month?
                  </h4>
              </Li>
              <li>
                          <Label>
                              <input
                                  type="radio"
                                  name="studentLoanPayment"
                                  value="400"
                                  onChange={this.handleInputChange}
                              />
                              400
                            <DynamicText>hidden op1 text</DynamicText>
                          </Label>
              </li>
              <li>
                          <Label>
                              <input
                                  type="radio"
                                  name="studentLoanPayment"
                                  value="500"
                                  onChange={this.handleInputChange}
                              />
                              500
                              <DynamicText>hidden op2 text</DynamicText>
                          </Label>
              </li>
              <li>
                <Label>
                  <input
                    type="radio"
                    name="studentLoanPayment"
                    value="200"
                    onChange={this.handleInputChange}>
                  </input>
                  200
                  <DynamicText>hidden op3 text</DynamicText>
                </Label>
             </li>
          </UL>
        );
      }
   }
const DynamicText = styled.ul`
    display:none;
`
1
  • There are two ways to do this, either wrap your <DynamicText> with a conditional jsx statement that checks for the state update for that input (you may want to use a unique id for each radio so that you can use that state value as the display boolean), or use refs to associate the DynamicText with the input. Commented Aug 8, 2019 at 0:06

1 Answer 1

1

Here is an example of how you could achieve this as I mentioned above using state: https://codesandbox.io/s/focused-sun-bluru?fontsize=14

Please note I have made minor alterations to your code to get this to work, you need to clean up the casing on your dom elements and make sure you are closing dom tags correctly. I also replaced your DynamicText component with divs but the same logic applies.

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

4 Comments

I'm using Emotion for styling! Which is why some of my tags are capitalized. But the logic looks great!
Ah I see sorry I haven't used Emotion so I wasn't sure what was going on there
is there a way for multiple states to be selected? I have several questions, and I'd like the displayed text to stay there next to the answer from the previous as the user continues the quiz
Maybe if you change to using checkboxes instead of radio buttons yes. You would just need to keep an array of currently selected IDs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.