Skip to main content
1 de 2
Joshua Rivera
  • 358
  • 1
  • 5
  • 18

React Js - Agregar Inputs de texto de forma dinámica

Estoy creando una app de encuestas con react, como práctica. La app consuste 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, haro 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;

Joshua Rivera
  • 358
  • 1
  • 5
  • 18