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