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;