React validation of dynamic checkboxes - reactjs

Question

I have 7 checkboxes that are rendered within a map method.. each checkbox has a question and when all checkboxes are checked, a button should be activated.. can someone please tell me how can I validate this using useState() hook.. I know how to do this with one checkbox, but I don't know how to handle multiple checkboxes that are rendered within a map method. A code example should be very helpful. Any help will be appreciated.
const [isChecked, setIsChecked] = useState(false);
{ questions.map(q => (
<input
type={q.radio ? "radio" : "checkbox"}
onClick={() => setIsChecked(!isChecked)}
value={isChecked}
id={option.id}
value={option.value}
name={`${q.name}`}
/>
There are 7 checkboxes rendered with this map method. How should I handle the state in this case?

Answer 1

If your questions are dynamic list you can use below approach:
const QUESTIONS = ["Do you use Stackoverflow?", "Do you asked a question?"];
function Confirmation({ data }) {
const [questions, setQuestions] = React.useState(
data.map((question, index) => {
return { id: index, text: question, checked: false };
})
);
const handleClick = (id, checked) => {
const newQuestions = [...questions];
const index = newQuestions.findIndex((q) => q.id === id);
newQuestions[index].checked = checked;
setQuestions(newQuestions);
};
const isButtonDisabled = questions.some((q) => q.checked === false);
return (
<div>
{questions.map((question) => (
<React.Fragment>
<input
key={question.id}
name={`question-${question.id}`}
type="checkbox"
checked={question.checked}
onClick={(e) => handleClick(question.id, e.target.checked)}
/>
<label htmlFor={`question-${question.id}`}>{question.text}</label>
</React.Fragment>
))}
<button disabled={isButtonDisabled}>Confirm</button>
</div>
);
}
ReactDOM.render(<Confirmation data={QUESTIONS} />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

To add to thedude's answer, you can dynamically adjust the checked array based on changes to your questions array so that you don't have to manually maintain the initial states or remember to sync it to the new length of questions if it changes.
const [checked, setChecked] = useState([])
const arrLength = questions.length;
useEffect(() => {
setChecked(() => (
Array(arrLength).fill().map((_, i) => checked[i] || false)
));
}, [arrLength]);

Answer 3

Following your example of mapping over your questions.
You could load those questions in useState and append the check value to them.
Click the Run Code Snippet below to see it working.
const { useState, useEffect } = React;
const App = props => {
const { questions } = props;
const [state, setState] = useState(null);
const onChangeCheckbox = index => event => {
const newState = [...state];
newState[index].checked = !newState[index].checked;
setState(newState);
}
useEffect(() => {
setState(questions.map(i => ({...i, checked: false }) ));
}, [questions]);
// Not loaded yet
if (!state) return <div></div>;
return <div>
{state && state.length > 0 && <div>
{state.map((i, k) => <p key={`question-${k}`}>
<label><input onChange={onChangeCheckbox(k)} type="checkbox" name={i.name} checked={i.checked} /> {i.question}</label>
</p>)}
</div>}
<hr />
<p><small>Debug</small></p>
<pre><code>{JSON.stringify(state, null, ' ')}</code></pre>
</div>;
};
const questions = [
{
name: 'cyborg',
question: 'Are you a cyborg?'
},
{
name: 'earth',
question: 'Do you live on earth?'
},
{
name: 'alien',
question: 'Are you from another planet?'
}
];
ReactDOM.render(<App questions={questions} />, document.querySelector('#root'));
body {
font-family: Arial, sans-serif;
}
pre {
background: #efefef;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 4

Use the key param to give each checkbox an identifier so it can be modified.
const [isChecked, setIsChecked] = useState([])
useEffect(() => {
compareList()
})
{ questions.map((q,i) => (
<input
type={q.radio ? "radio" : "checkbox"}
onClick={() => setIsChecked(!isChecked[i])}
value={isChecked[i]}
id={option.id}
value={option.value}
name={`${q.name}`}
key=i
/>

Answer 5

If you use controlled input the solution might be like this:
const initialState = [
{
name: "Check option 1",
checked: false
},
{
name: "Check option 2",
checked: false
},
]
const App = () => {
const [checkboxes, setCheckboxes] = useState(initialState)
const [quizFinished, setQuizFinished] = useState(false)
// the useEffect checks if all questions are completed
useEffect(()=>{
setQuizFinished(checkboxes.reduce((acc, cbx) => acc && cbx.checked, true))
}, [checkboxes])
function handleChange(e) {
setCheckboxes(
checkboxes.map(cbx => cbx.name === e.target.name ? {...cbx, checked:!cbx.checked} : cbx)
)
}
return (
<>
{checkboxes.map(cbx => <Checkbox name={cbx.name} checked={cbx.checked} onChange={handleChange}/>)}
{quizFinished && <button>Finish</button>}
</>
)
}
const Checkbox = ({name, checked, onChange}) => {
return (
<>
<label>
{name}
<input type="checkbox" name={name} checked={checked} onChange={onChange} />
</label>
<br/>
</>
)
}

Answer 6

You can model your state to fit your usecase. For a list of 7 checkboxes you can have an array with 7 values:
const [checked, setChecked] = useState([false, false, false, false, false, false, false])
The when a check box is clicked:
{ questions.map((q, i) => (
<input
type={q.radio ? "radio" : "checkbox"}
onClick={() => setChecked(current => {
const newState = [...current]
newState[i] = !newState[i]
return newState
} )}
value={checked[i]}
id={option.id}
value={option.value}
name={`${q.name}`}
/>
To know if all are checked you can defined a variable:
const areAllChecked = checked.every(Boolean)