Modify prop in list of components generated in a loop - reactjs

Question

I have a checkbox component that has a disabled property. My goal is:
When 3 checkboxes are selected set the disabled property to true in all checkboxes that are not selected.
Each time a checkbox is selected show an updated count of remaining selection allowed.
For goal 1 I am not sure what the right way to do this is. Do I need to create an array of refs?
For goal 2 I have added this code:
{3 - Object.keys(selected).length + " domains remaining"}
But when selected is updated the render does not get the updated value.
My code with comment where I want to disable/enable all is on codesandbox here: https://codesandbox.io/s/exciting-bush-119ef?file=/src/App.js
Also pasted here below:
import React, { useState } from "react";
export default function App(props) {
const [enableSelection, setEnableSelection] = useState(true);
const [selected, setSelected] = useState({});
let domains = [
"example1.com",
"example2.com",
"example3.com",
"example4.com",
"example5.com",
"example6.com",
"example7.com",
"example8.com",
"example9.com",
"example10.com",
"example11.com",
"example12.com",
"example13.com",
"example14.com",
"example15.com",
"example16.com"
];
function handleChange(index, event) {
console.log(index);
console.log(event.target.name);
console.log(event.target.value);
console.log(event.target.checked);
if (event.target.checked === true) {
setSelected((prev) => {
prev[index] = event.target.value;
return prev;
});
} else {
setSelected((prev) => {
delete prev[index];
return prev;
});
}
if (Object.keys(selected).length >= 3) {
//disable all other input
} else {
//make sure all other enabled
}
}
return (
<div className="">
<div className="">
<SubHead
text={3 - Object.keys(selected).length + " domains remaining"}
/>
{domains.map((domain, i) => (
<div key={i} className="odd:bg-gray-200">
<CheckBox
disabled={false}
label={domain}
name={"checkbox_" + i}
value={domain}
onChange={(index, e) => handleChange(i, e)}
/>
</div>
))}
</div>
</div>
);
}
function CheckBox({
disabled,
key,
label,
selected,
name,
value,
onChange: parentChange
}) {
const [selectedState, setSelectedState] = useState(selected ?? false);
function handleChange(event) {
setSelectedState(!selectedState);
parentChange(key, event);
}
return (
<label key={key} className="inline-flex items-center mt-3">
<input
id={name}
name={name}
value={value}
onChange={handleChange}
type="checkbox"
className="form-checkbox h-5 w-5 text-gray-600"
disabled={disabled}
checked={selected}
/>
<span
className={
"ml-2 " +
(selectedState ? "font-semibold " : "") +
(disabled ? "text-gray-400" : "text-gray-700")
}
>
{label}
</span>
</label>
);
}
function SubHead(props) {
return <h3 className="font-medium text-xl text-center">{props.text}</h3>;
}

Answer 1

The problem was that you handle the event in two places,
You don't need to handle the state of the checkbox twice, once in the parent and another inside it. I also converted the selected to array to make it easier:
Here is the demo: https://codesandbox.io/s/boring-sun-35lfk?file=/src/App.js
import React, { useState } from "react";
export default function App(props) {
const [selected, setSelected] = useState([]);
let domains = [
"example1.com",
"example2.com",
"example3.com",
"example4.com",
"example5.com",
"example6.com",
"example7.com",
"example8.com",
"example9.com",
"example10.com",
"example11.com",
"example12.com",
"example13.com",
"example14.com",
"example15.com",
"example16.com"
];
function handleChange(event) {
console.log(event.target.name);
console.log(event.target.value);
console.log(event.target.checked);
if (event.target.checked) {
setSelected((prev) => [...prev, event.target.name]);
} else {
setSelected((prev) => prev.filter((name) => name !== event.target.name));
}
if (Object.keys(selected).length >= 3) {
//disable all other input
} else {
//make sure all other enabled
}
}
const remaining = 3 - Object.keys(selected).length;
return (
<div className="">
<div className="">
<SubHead text={remaining + " domains remaining"} />
{domains.map((domain) => {
const checked = selected.indexOf("checkbox_" + domain) > -1;
return (
<div key={domain} className="odd:bg-gray-200">
<CheckBox
checked={checked}
disabled={!checked && remaining === 0}
label={domain}
name={"checkbox_" + domain}
value={domain}
onChange={handleChange}
/>
</div>
);
})}
</div>
</div>
);
}
function CheckBox({
checked,
disabled,
key,
label,
selected,
name,
value,
onChange: parentChange
}) {
return (
<label key={key} className="inline-flex items-center mt-3">
<input
id={name}
name={name}
value={value}
onChange={parentChange}
type="checkbox"
className="form-checkbox h-5 w-5 text-gray-600"
disabled={disabled}
checked={selected}
/>
<span
className={
"ml-2 " +
(checked ? "font-semibold " : "") +
(disabled ? "text-gray-400" : "text-gray-700")
}
>
{label}
</span>
</label>
);
}
function SubHead(props) {
return <h3 className="font-medium text-xl text-center">{props.text}</h3>;
}