Solo me preguntaba cómo crear una función que también pueda tener en cuenta todos los demás colores, sin duplicar las siguientes funciones para cada color.
const blackSwitch = () => { if (black == true) { setBlack(false) } else { setBlack(true) } } const whiteSwitch = () => { if (white == true) { setWhite(false) } else { setWhite(true) } } <div> <input type="checkbox" value="false" name="checkbox" onClick={whiteSwitch} /> White <input type="checkbox" value="false" name="checkbox" onClick={blackSwitch} /> Black </div>Crear una función que tome como parámetro un arreglo (arreglo de objetos). Entonces haz forEach.
const setColor = (setColorFn, color) => setColorFn(!color) const colors = [ {vale: black, fn: (color) => setColor(setBlack, black)}, {vale: white, fn: (color) => setColor(setWhite, black)} ] colors.forEach(({value, fn}) => { fn(value) })O si necesita funciones, que se pueden usar en el código, puede usar el método de reducción.
// object should have name key right now. const colors = [ {vale: black, fn: (color) => setColor(setBlack, black), name: 'Black'}, {vale: white, fn: (color) => setColor(setWhite, black), name: 'White'} ] const colorSetters = colors.reduce((acc, next) => { return {...acc, [`set${next.name}`]: next.fn} }, {})y puedes usarlo así:
colorSetters.setBlack(black)Aquí tiene jsFiddle, que cierra la sesión del objeto final con setters de color: https://jsfiddle.net/8angt5fj/4/
También descubrí que podía hacer esto con valores de entrada, simplemente no estoy SEGURO de cómo eliminar duplicados de un Color en caso de que no se haga clic en la CAJA DE VERIFICACIÓN o se haga clic nuevamente
const TestArrayPush = (e) => { setColorArray(oldArray => [...oldArray, e]) console.log(colorArray) } <input type="checkbox" value="White" name="checkbox" onClick={(e) => TestArrayPush(e.target.value)} /> White <input type="checkbox" value="Black" name="checkbox" onClick={(e) => TestArrayPush(e.target.value)} /> Black