I am rendering a questionnaire page that shows a question component that has the following attributes; Question number, Question text, and 5 radio buttons that each have an answer.
What i am trying to achieve is when a user clicks on a radio button, I store on state the answer and the question number.
I have come across a problem where once my component renders and I click an answer it seems like it re-renders and my radio button of choice seems like it has not been clicked.
This is my Questionaire page where I embed the question component
const Questionaire = (props) => {
const [answers, set_answers] = useState({});
console.log("Inside Questionaire component", answers);
const onChangeAnswerFunc = (answer, match) => {
set_answers({ ...answers, [match.params.questionNumber]: answer });
};
return (
<div className="quiz">
<Route
path="/dashboard/questions/:questionNumber"
component={({ match }) => (
<Question
questionNumber={match.params.questionNumber}
answerFunc={(e) => onChangeAnswerFunc(e, match)}
/>
)}
/>
</div>
);
};
export default Questionaire;
And this is my question component
const Question = ({ omat, pmat, cmat, questionNumber, answerFunc }) => {
const [currentRadioValue, setRadioValue] = useState(null);
useEffect(() => {
if (currentRadioValue != null) {
answerFunc(currentRadioValue);
console.log("Inside useEffect");
}
}, [currentRadioValue, answerFunc]);
const onChange = (e) => {
setRadioValue(e.target.value);
// handleChange();
// console.log("onChange");
};
console.log("Under on change", currentRadioValue);
const handleChange = () => {
answerFunc(currentRadioValue);
};
// console.log(currentRadioValue);
const onSubmit = async (e) => {
e.preventDefault();
};
if (!omat) return null;
const question = omat[questionNumber];
const {
question: text,
section,
subject,
score0,
score25,
score50,
score75,
score100,
} = question;
const anyQuestion = (
<Link to={`/dashboard/questions/${Number(questionNumber) + 1}`}>Next</Link>
);
const finalQuestion = <button>Submit</button>;
const previousQuestion = (
<Link to={`/dashboard/questions/${Number(questionNumber) - 1}`}>
Previous
</Link>
);
return (
<div>
<div className="questions">
<h2 className="lead">Question number: {questionNumber} / 40 </h2>
<p className="question-section">Section: {section}</p>
<p className="question-subject">Subject: {subject}</p>
<div>{text}</div>
<form className="form" onSubmit={(e) => onSubmit(e)}>
<div className="form-group">
<>
<input
type="radio"
name={`Radio`}
value="Radio - 1"
checked={currentRadioValue === `Radio - 1`}
onChange={(e) => onChange(e)}
/>
<label> - {score0}</label>
</>
</div>
<div className="form-group">
<>
<input
type="radio"
name={`Radio`}
value="Radio - 2"
checked={currentRadioValue === `Radio - 2`}
onChange={(e) => onChange(e)}
/>
<label> - {score25}</label>
</>
</div>
<div className="form-group">
<>
<input
type="radio"
name={`Radio`}
value="Radio - 3"
checked={currentRadioValue === `Radio - 3`}
onChange={(e) => onChange(e)}
/>
<label> - {score50}</label>
</>
</div>
<div className="form-group">
<>
<input
type="radio"
name={`Radio`}
value="Radio - 4"
checked={currentRadioValue === `Radio - 4`}
onChange={(e) => onChange(e)}
/>
<label> - {score75}</label>
</>
</div>
<div className="form-group">
<>
<input
type="radio"
name={`Radio`}
value="Radio - 5"
checked={currentRadioValue === `Radio - 5`}
onChange={(e) => onChange(e)}
/>{" "}
<label> - {score100}</label>
</>
</div>
</form>
</div>
{Number(questionNumber) > 0 ? previousQuestion : null}
{Number(questionNumber) !== 5 ? anyQuestion : finalQuestion}
<Link to={`/`}>Exit</Link>
</div>
);
};
const mapStateToProps = (state) => ({
auth: state.auth,
omat: state.questions.omat,
pmat: state.questions.pmat,
cmat: state.questions.cmat,
});
export default connect(mapStateToProps)(Question);
If I disable the handleChange function from the onChange, the radio - button are displayed properly (checked), with the handleChange uncommended the value once passed returns again to null.
I will attach a console log which might help further.
Here is a picture of the front end rendered
Thanks in advance!
Use shouldComponentUpdate
life-cycle method to prevent unnecessary rendering, by default component re-rendered on state change.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.