0

tengo un formulario de preguntas en el cual puse multiples switch ya que las respuestas son si o no.

Al crearlo la logica funciona(se registra true y false por console.log) pero los switchs se mueven todos juntos para true y para false.introducir el código aquí

perdon pense que asi se iba a ver mejor, ahi paso el codigo.

>aca esta la funcion 

```
      const [responses, setResponses] = React.useState([]);
      const [resp, setResp] = React.useState(true);
      const setResps = (id, valor) => {
        setResp(valor);
        const newResponses = [...responses];
        setResp(valor);
        newResponses[id] = { id_question: id, value: resp };
        setResponses(newResponses);
        console.log(responses);
      }

>esta parte es la renderizacion del form con los switch

<Forms onSubmit={handleSubmit}>
              {question.map((questions, index) => (
                <li key={question.id_question}>
                  <List>
                    <ListItem primary={questions.question} height="medium" 
                  />
                  </List>
                  <div className="check">
                    <div>
                      
           <Switch label="This is a switch" onChange={() => 
            setResps(questions.order, (!resp))} className="demo- 
  checkbox"         
           checked={!resp} />
                    </div>
                    {`Value is ${!resp}`}
                  </div>
                </li>
              ))}
       ```

Creo que el error viene por el lado del array(question) ya que en ningún momento actualizo su estado.trate de hacerlo pero me da error.

muchas gracias

2
  • ¡Bienvenido a stackOverflow en español! Por favor no utilices imágenes con código, cuándo formúlas tus preguntas tienes las herramientas para compartir el código de manera correcta, revisa esto.
    – FranAcuna
    Commented el 13 oct. 2020 a las 22:44
  • resp es un único boolean en tu código, pero tienes un array para la lista. Entonces cada vez que usas el Switch todos los swiches se van a actualizar.
    – milmal
    Commented el 14 oct. 2020 a las 10:11

1 respuesta 1

0

Como escribí en el comentario, resp es un único boolean, pero necesitas un boolean para cada pregunta.

Aquí tienes una solución: https://codesandbox.io/s/currying-bush-nx8cm?file=/src/App.js

Puse el Switch como un componente propio con su propio estado. Uso un simple Switch, pero puedes usar tu Switch componente en lugar de <label> y <input>.

export const Switch = (props) => {
  const [resp, setResp] = React.useState(props.respuesta);
  return (
    <label className="switch">
      <input
        type="checkbox"
        checked={resp}
        onChange={() => {
          setResp(!resp);
          props.actualizar(!resp);
        }}
      />
      <span className="slider round" />
    </label>
  );
};
5
  • gracias por la respuestas, entiendo casi todo solo tengo unas dudas. const [preguntas, setPreguntas] = React.useState(question); console.log(preguntas) no m e trae nada ya que question viene de otro componen traido por apicall. No se si tengo que hacer alguna llamada especial para este caso, como utilizar componentWillReceiveProps ya qu enunca lo utilice. gracias Commented el 14 oct. 2020 a las 14:28
  • Okay, que recibes cuando escribes console.log(question)? (porque tienes question.map((questions, index)....)
    – milmal
    Commented el 14 oct. 2020 a las 15:44
  • claro, si escribo console.log(question) recibo toda la info. pero si lo pongo como vos haces. const [preguntas, setPreguntas] = React.useState(question); console.log(preguntas) eh imprimo preguntas me sale vacio Commented el 14 oct. 2020 a las 15:48
  • ah okay, si question cambia puedes usar useEffect. React.useEffect(() => { setPreguntas(question); }, [question]). Esta función va a actualizar cada vez que question se actualize.
    – milmal
    Commented el 14 oct. 2020 a las 16:54
  • Mil Gracias Milmal, lo pude solucionar con tu ayuda, gracias por la gran mano, el useEffect me sirvió de maravilla. Sos un genio nunca se me hubiera ocurrido setear dentro del switch. abrazo grande. Commented el 15 oct. 2020 a las 13:53

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.