Select multiple checkboxes without toggling - reactjs

Question

I am new to react. I am trying to create a component that hides a div when a checkbox is clicked. The problem I am having is, if I introduce more than one checkbox the divs visibility is toggled. Is there an alternative way to allow the selection of all checkboxes?
The functionality should be: click a checkbox or multiple > div remains hidden until all checkboxes are cleared or unchecked.
JSX:
import React, { useState } from 'react';
function reactComponent() {
const [isChecked, setIsChecked] = useState(false);
const toggle = () => setIsChecked(!isChecked);
return (
<div>
<div>
<input type="checkbox" id="option" name="option" onClick={toggle} />
<label for="scales">option</label>
</div>
<div>
<input type="checkbox" id="option" name="option" onClick={toggle} />
<label for="scales">option</label>
</div>
<div className={isChecked ? "hide" : "block "}>
<h3 className="red bold">Content</h3>
<p>lorem Ipsum</p>
</div>
</div>
)
}
export default reactComponent

Answer 1

To achieve what you've described you could use controlled inputs for checkboxes and have a separate piece of state for every checkbox. Here is Codesandbox demo of an example below (you can change some to every in shouldShow flag if you need to show the div if and only if all the checkboxes are checked).
function App() {
const [isChecked, setIsChecked] = useState({ option1: false, option2: false })
const toggle = ({ target: { name } }) =>
setIsChecked({ ...isChecked, [name]: !isChecked[name] })
// Are there any checked ones?
const shouldShow = Object.values(isChecked).some(val => val)
return (
<>
<div>
<input
type="checkbox"
id="option1"
name="option1"
checked={isChecked.option1}
value={isChecked.option1}
onClick={toggle}
/>
<label for="option1">option1</label>
</div>
<div>
<input
type="checkbox"
id="option2"
name="option2"
checked={isChecked.option2}
value={isChecked.option2}
onClick={toggle}
/>
<label for="option2">option2</label>
</div>
<div className={shouldShow ? "hide" : "block "}>
<h3 className="red bold">Content</h3>
<p>lorem Ipsum</p>
</div>
</>
)
}

Answer 2

If you render your checkboxes from an array, you can always check if the length of that array is the same as the length of the checked array kept in state.
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const myOptions = ["option1", "option2", "option3", "option4"];
const [myChecked, setMyChecked] = useState([]);
const toggle = e => {
e.persist();
if (e.target.checked) {
setMyChecked(oldArray => [...oldArray, e.target.name]);
} else {
setMyChecked(oldArray => oldArray.filter(item => item !== e.target.name));
}
};
const showDiv = () => {
return myChecked.length === myOptions.length;
};
return (
<div>
{myOptions.map(option => (
<div>
<label>
<input type="checkbox" name={option} onChange={toggle} />
{option}
</label>
</div>
))}
<div className={showDiv() ? "block" : "hide "}>
<h3>Content</h3>
<p>lorem Ipsum</p>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Codesandbox