1

Estoy creando una app de encuestas con React js, como práctica. La app consiste en establecer una pregunta y posteriormente añadir opciones de respuesta; para ello, lo que deseo realizar es que agregar los inputs de texto de forma dinámica y que cada uno cuente con el valor establecido por el usuario; lo que he realizado es que al presionar el botón de añadir opción de respuesta, se genere un arreglo de numérico y por cada uno de sus elementos se cree un input de texto, ahora bien todos capturan el mismo valor, y lo que quiero es que sea dinámico, y el valor de cada uno sea capturado y guardado en un array.

Mi código es el siguiente:

El estado addOption es donde se genera el arreglo numérico, para después efectuar un map y agregar un input por cada uno de los elementos del array.

const FormEditor = () => {
   const [addOptions, setAddOptions] = useState([1]);
   const [question, setQuestion] = useState();
   const [answer, setAnswer] = useState();
   let i = 1

   let questionsList = [

   ]

   // Estados de arreglos para las preguntas
   const [questions, setQuestions] = useState([]) 

   useEffect(async () => {
       const res = await axios.get('http://localhost:4000/api/questions')
       console.log(res.data)
       console.log(question)
   }, [question])

   const handleSubmit = async (e) => {
       e.preventDefault();

       // if(question !== '' || answer !== '') {
           const form = await axios.post('http://localhost:4000/api/questions', {
               questions: [{
                   question: question,
                      answers: [{
                          answer: answer
                      }] 
                  }] 
              })  
          // } 
          console.log('Question added successfully')
      }

   const handleChange = (e) => {
       switch (e.target.name) {
           case 'question':
               setQuestion(e.target.value);
           break;
           case 'answer':
               setAnswer(e.target.value)
           break;
           default: 
               break;
       }
   }

   return (
       <Container>
           <Helmet>
               <title>Form Editor</title>
           </Helmet>
           <Header type="form"/>
           <ContainerForm>
               <ContainerQuestion>
                   <div>
                       <form onSubmit={handleSubmit}>
                           <InputQuestion 
                               type="text" 
                               name="question"
                               value={question}
                               onChange={handleChange}
                               placeholder="Untitled question"
                               autoComplete="off"
                           />
                           {addOptions.map(() => {
                                return <InputAnswer 
                                            type="text" 
                                            name="answer"
                                            value={answer}
                                            onChange={handleChange}
                                            placeholder="Option"
                                            autoComplete="off"
                                        />
                           })}
                           <button>Add</button>
                       </form>
                       <div>
                           <button onClick={() => {
                               i = i+1;
                               setAddOptions([...addOptions, i])
                               console.log(addOptions)
                           }}>Add Answer</button>
                       </div>
                   </div>
                   <div>

                   </div>
               </ContainerQuestion>
           </ContainerForm>
       </Container>
   );
}

export default FormEditor;

1 respuesta 1

1

Value={answer}

Eso es lo que pusiste. Si quieres valores diferentes te toca poner valores diferentes. Puede ser un array de strings y hacer value={answer[index]} incluso el index puede venir dado por addOption

Ten cuidado de no mutar el array en el setAnswer si no de crear una nueva referencia para el nuevo set.

0

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.