Dynamic Text Display with Radio Buttons in React

Question

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;
`

Answer 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.