1

¿Qué me recomiendan para hacer un componente funcional con exactamente 4 Checkbox? Los he creado dinámicamente mapeando un Array y les coloco su valor checked de un:

const [checked, setChecked] = useState([false, false, false, false])

y luego con una función les cambio el estado, algo tipo:

const checkboxes = array.map( (el, index) => {

return <Checkbox

checked={checked[index]}

onChange={checkedHandler}/>

}

Con un handler:

const checkedHandler = (event, index) => {

setChecked(...)

//Bueno, aquí me quedé corto porque no sé como cambiar el valor de un índice en concreto con ese setChecked.

}

¿O me veré obligado a crear un useState para cada Checkbox?

Mi problema es que no puedo manejar bien su estado checked con lo que pienso...

introducir la descripción de la imagen aquí

1 respuesta 1

2

Yo haría un componente Checkbox con su estado propio. Piensa que tu solución no es fácilmente escalable ni reutilizable. ¿Qué pasaría si en vez de 4 Checkbox tienes 20? Tendrías que manejar un array como estado para todos los Checkbox. De la otra forma cada uno tiene su estado propio.

Mira este pequeño ejemplo. Como ves, cada componente Checkbox tiene su estado independiente

// Get a hook function
const {useState} = React;

const Checkbox = ({ initialState, id, onChange }) => {
  const [checked, setChecked] = useState(initialState);
  
  const onClick=(checked)=>{
   setChecked(checked);
   onChange(id, checked);
  }
  return (
    <input
      type="checkbox"
      onClick={e => onClick(e.target.checked)}
      checked={checked}
    />
  );
};

const App = () => {

  const onCheckboxClicked=(idx, isChecked)=>{
    console.log(`I'm checkbox number ${idx} and i'm checked? --> ${isChecked}`);
    //Aquí puedes guardar estados si es necesario
  }

  return (
    <div>
      {[1, 2, 3, 4].map((checkbox,i) => (
        <Checkbox initialState={true} id={i+1} onChange={onCheckboxClicked} />
      ))}
    </div>
  );
};

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);
<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="react"></div>

6
  • ¡Tienes razón! Entiendo la idea, gracias. No he practicado mucho con React y me tocó colaborar en el desarrollo de una página. Gracias.
    – V0LT3RR4
    Commented el 18 dic. 2019 a las 14:45
  • 1
    Piensa además que tu componente checkbox puede crecer y tener nuevas funcionalidades con lo cual debes desacoplarlo al máximo del resto de tu código.
    – Kiko_L
    Commented el 18 dic. 2019 a las 14:48
  • Aprovecho la "conversación"... y para obtener el resultado de ese Checkbox como hago? Es decir, pasarlo a su padre? Uso un Context o qué me recomiendas? No sé usar Redux.
    – V0LT3RR4
    Commented el 18 dic. 2019 a las 14:50
  • 1
    He actualizado el ejemplo. Si quieres acceder al estado del hijo desde el padre lo mejor es que le pases una función a la que invocar desde dicho hijo con los parámetros que quieres obtener. En el ejemplo le pasamos una propiedad onChange que es una referencia a la función onCheckboxClicked. Dicha función se ejecuta en el hijo y así el padre tiene accesible el valor del estado del hijo. Para un sólo nivel no es necesario usar el contexto (por cierto, con el hook useContext ya no es necesario aprender Redux).
    – Kiko_L
    Commented el 18 dic. 2019 a las 15:22
  • 1
    Otra opción que tienes es usar el hook useRef que crea una referencia al elemento del DOM para poder modificar y obtener sus valores pero esto no rompe la regla de la programación declarativa y no es recomendable salvo en contadas excepciones (es.reactjs.org/docs/hooks-reference.html#useref)
    – Kiko_L
    Commented el 18 dic. 2019 a las 15:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.