How to collect IDs of all checked checkboxes and push values to an array in React

Question

I'm moving an old multiple choice quiz app from Blaze to React.

The app grabs quizzes from the DB and then for each question it loops through the answers and prints a checkbox for each one.

Each of these answers for each of the questions was inside a form, and when the form was submitted I used jQuery to grab the ID of each :checked checkbox. These IDs were then pushed to an array and sent to the server to compare vs the correct answers.

Now that I'm using React, I'm having some difficulty replicating this functionality as using checkboxes isn't the same.

What would be the best way to get the value of the checked checkboxes in to an array?

Here is my code with as much irrelevant data cut out as possible:

Assessment.jsx

class Assessment extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { module } = this.props.params;
        const { loading, modules, assessment } = this.props;
        return (
            <div className="Assessment">
                <div className="section">
                    <form onSubmit={ this.submitForm }>
                        { assessment.questions.map((question) => {
                            return <AssessmentQuestion question={question} key={question.number}/>
                        })}
                        <button className="btn btn-action btn-block" type="submit">Submit Assessment</button>
                    </form>
                </div>
            </div>
        )
    }
}

AssessmentQuestion.jsx

class AssessmentQuestion extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { question } = this.props;
        return (
            <div className="question" data-number={question.number}>
                <p>
                    {question.number}) {question.question}
                </p>

                { question.answers.map((answer) => {
                    return <div className="checkbox">
                        <label>
                            <input type="checkbox" name={question.number} value={answer.letter} id={answer.number, answer.letter}/>
                            { answer.answer }
                        </label>
                    </div>/>
                })}
            </div>
        )
    }
}

As you can see, I am looping through each question and for each question looping through each answer and printing a checkbox. When the user submits the form in the parent 'Assessment.jsx' component, I want to collect the id of each checked checkbox and push that in to an array so I can send to the server for grading.

Any help much appreciated

dbuss1 · Accepted Answer · 2017-06-25 16:09:34Z

3

There are a couple of ways you could solve this. The easier way, which is closer to the solution you had before, is to use React refs. https://facebook.github.io/react/docs/refs-and-the-dom.html You could add a ref to the checkboxes, and then filter down to the checked ones.

An alternative (and more "Reacty" approach) would be to manage all this "checked" logic with React state. Basically, your Assesment.jsx class would keep track of the state and then send it to the form on submit. You create a function to update the state with the questionName and answer, and pass that function as an onClick callback to your AssesmentQuestion class.

answered Jun 25, 2017 at 16:09

dbuss1

5001 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Davorin Ruševljan · Accepted Answer · 2017-06-25 16:55:54Z

0

Each checkbox would have onclik which would update state, or even better if using redux, dispatch action which would result in state update.

When sending to server only information in state would get used

answered Jun 25, 2017 at 16:55

Davorin Ruševljan

4,40223 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to collect IDs of all checked checkboxes and push values to an array in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related