Estoy tratando de pasar un ejemplo en el que se controla la selección / deselección de varios checkboxes que esta en una clase a hooks, pero no funciona.
En ambos casos tengo un componente Checkbox que no cambia:
import React from "react";
const Checkbox = ({ label, isSelected, onCheckboxChange }) => (
<div className="form-check">
<label>
<input
type="checkbox"
name={label}
checked={isSelected}
onChange={onCheckboxChange}
className="form-check-input"
/>
{label}
</label>
</div>
);
export default Checkbox;
El código de partida:
import React, { Component } from "react";
import Checkbox from "./Checkbox";
const checkboxes = {
"One": false,
"Two": false,
"Three": false
};
class App extends Component {
state = {
checkboxes
};
selectAllCheckboxes = isSelected => {
Object.keys(checkboxes).map((key, value) => {
checkboxes[key] = isSelected;
});
this.setState({ checkboxes });
};
selectAll = () => this.selectAllCheckboxes(true);
deselectAll = () => this.selectAllCheckboxes(false);
handleCheckboxChange = changeEvent => {
console.log('clicked: ' + changeEvent.target)
};
createCheckbox = option => (
<Checkbox
label={option}
isSelected={this.state.checkboxes[option]}
onCheckboxChange={this.handleCheckboxChange}
key={option}
/>
);
createCheckboxes = () => Object.keys(checkboxes).map(this.createCheckbox);
render() {
// HACK: traces
if (this.state !== undefined && this.state.checkboxes !== undefined) {
console.log(this.state.checkboxes)
}
return (
<form>
{this.createCheckboxes()}
<div className="form-group mt-2">
<button
type="button"
className="btn btn-outline-primary mr-2"
onClick={this.selectAll}>Select All</button>
<button
type="button"
className="btn btn-outline-primary mr-2"
onClick={this.deselectAll}>Deselect All</button>
</div>
</form>
);
}
}
export default App;
El código que no me funciona:
import React, { useState } from "react";
import Checkbox from "./Checkbox";
function App()
{
const checkboxes = {
"One": false,
"Two": false,
"Three": false
}
const [options, setOptions] = useState(checkboxes)
const selectAllCheckboxes = isSelected => {
Object.keys(checkboxes).map((key, value) => {
checkboxes[key] = isSelected;
});
setOptions(checkboxes);
};
const selectAll = () => selectAllCheckboxes(true);
const deselectAll = () => selectAllCheckboxes(false);
const handleCheckboxChange = changeEvent => {
console.log('clicked ' + changeEvent.target)
};
const createCheckbox = option => (
<Checkbox
label={option}
isSelected={options[option]}
onCheckboxChange={handleCheckboxChange}
key={option}
/>
);
const createCheckboxes = () => Object.keys(checkboxes).map(createCheckbox);
return (
<form>
{createCheckboxes()}
<div className="form-group mt-2">
<button
type="button"
className="btn btn-outline-primary mr-2"
onClick={selectAll}
>Select All</button>
<button
type="button"
className="btn btn-outline-primary mr-2"
onClick={deselectAll}
>Deselect All</button>
</div>
</form>
);
}
export default App;
¿Qué me falta?