gente, espero me pueda ayudar.
Sucede que estoy creando un formulario en React donde van a pasar unos datos simples pero uno de ellos, que es un input, ya tiene un valor por defecto el cual no pasa por mi función.
Hago uso de UseSate para controlar los datos dentro del formulario:
const [newMateria, setNewMateria] = React.useState();
Hago que a través del value de cada etiqueta de mi formulario, se guarde en el estado.
const handleChangeMateria = (e) => setNewMateria({...newMateria, [e.target.name] : e.target.value});
Con esta función paso los parámetros guardados del estado para enviarselos por POST a mi api
const addMateria = async () =>{
await fetch(`https://api.com/api/defaultApi`,
{method: "POST", headers: { "Content-type": "application/json; charset=UTF-8" },
body: JSON.stringify(newMateria)}).then(response => response.json())
.then(json => console.log(json))
.catch(error => console.error(`error al agregar materia ${error}`));
}
Mi formulario
<form onSubmit={handleSubmitMateria} id="asinacionMateria" method="POST">
<Input onChange={handleChangeMateria} name="idAlumno" aria-label="none" css={{marginBottom:"15px"}}
required placeholder="Nombre Completo" value={id} ></Input>
<label>Materia</label>
<select onChange={handleChangeMateria} name="idMateria" style={{marginBottom:"15px"}} >
<option defaultValue>Selecciona una Materia</option>
{Materias.map(e=> <option key={e._id} value={e._id} >{e.nombreMateria}</option>)}
</select>
<label>Bloque</label>
<select onChange={handleChangeMateria} name="bloque" style={{marginBottom:"15px"}} >
<option defaultValue>Selecciona un Bloque</option>
<option aria-label="none" value={"1"}>BLOQUE 1</option>
<option aria-label="none" value={"2"}>BLOQUE 2</option>
<option aria-label="none" value={"3"}>BLOQUE 3</option>
<option aria-label="none" value={"4"}>BLOQUE 4</option>
</select>
<label>Fecha Inicio</label>
<Input onChange={handleChangeMateria}
id="fechaInicio" name="fechaInicio" css={{marginBottom:"15px"}}aria-label="none" type={"date"}></Input>
<label>Fecha Fin</label>
<Input onChange={handleChangeMateria}
id="fechaFin" name="fechaFin" css={{marginBottom:"15px"}}aria-label="none" type={"date"}></Input>
<Button aria-label="none" auto type="submit" >Guardar</Button>
</form>
Todo funciona correctamente, excepto cuando pones un value por defecto, como lo hago en el input "idAlumno". Si a este le escribo a mano lo que quiero pasarle, si lo guarda y lo envía.
const [newMateria, setNewMateria] = React.useState({idAlumno: "valor"});
y luego en el componente:value={newMateria?.idAlumno}