I am working on a small survey app, and it's built in the style of a multi-step form. There is the <MasterForm />
component which houses all the steps. The steps are in this order: Intro > Question1 > Question2 > Question3 > Results. I followed the written article/tutorial over on CSS Tricks here to get the <MasterForm />
to render each step individually. That is working just fine.
In each of the 3 <Question />
components, there are an arbitrary number of checkboxes which the user can check (with a label), or not check any at all. They are completely optional. I've only listed 5 options to keep things shorter.
What I want to do is keep track of any checkboxes the user did check, and in the <Results />
component where every Question and each of their options are listed, highlight the matching ones.
To clarify, here is the relevant code for <MasterForm />
:
const MasterForm = () => {
const [checkedQuestionOneBoxes, setCheckedQuestionOneBoxes] = useState([]);
// get checked boxes from question 1
const addQuestionOneCheckedBoxes = (e) => {
console.log(e.target);
setCheckedQuestionOneBoxes.push(e.target);
console.log(checkedQuestionOneBoxes);
};
// inside the return...
<Question1
currentStep={currentStep}
currentQuestion={currentQuestion}
onClickHandler={incrementStepAndQuestion}
titles={titles}
checkBoxHandler={addQuestionOneCheckedBoxes}
/>
}
<Question1 />
Component Code:
import React from 'react';
const Question1 = ({ currentStep, currentQuestion, onClickHandler, titles, checkBoxHandler }) => {
const titleToRenderIndex = titles.map((el) => el.step).indexOf(currentStep);
if (currentStep === 1) {
return (
<div className='question'>
<h4 className='question__step'>Question {currentQuestion}/3:</h4>
<h2 className='question__heading question__heading--astronaut'>
{titles[titleToRenderIndex].title}
</h2>
<ul className='question__list'>
<li>
<input type='checkbox' className='q1' value='1' onChange={checkBoxHandler} />
<label>Option #1</label>
</li>
<li>
<input type='checkbox' className='q1' value='2' onChange={checkBoxHandler} />
<label>Option #2</label>
</li>
<li>
<input type='checkbox' className='q1' value='3' onChange={checkBoxHandler} />
<label>Option #3</label>
</li>
<li>
<input type='checkbox' className='q1' value='4' onChange={checkBoxHandler} />
<label>Option #4</label>
</li>
<li>
<input type='checkbox' className='q1' value='5' onChange={checkBoxHandler} />
<label>Option #5</label>
</li>
</ul>
<button className='button button--astronaut' onClick={onClickHandler}>
Next Question
</button>
</div>
);
} else {
return null;
}
};
export default Question1;
So let's say when looking at Question1, the user checks Option#1 & #4. I want to store these 2 in state. Later on when looking at the Results component, where the 'title' and ALL 5 options are listed beneath it, I want to highlight #1 & #4 as those were the ones that were checked. But again, the user could've also selected NONE of these, which is fine. Therefore, in that scenario, NONE of the 5 options would be highlighted when viewing the Results Component. I need to have this same functionality for the Question2 & Question3 components as well.
So, how I can track the state of any checked boxes in each of these 3 components, as well as highlight them in the Results component?
Aucun commentaire:
Enregistrer un commentaire