mardi 17 novembre 2020

How can I track any checked checkboxes across multiple components?

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