Lo que estoy tratando de hacer es, que al momento de que selecciono el usuario y además la Celda, solo quiero que me envié los datos independiente, pero este me esta mandando todos los datos que están en ambos arrays, para cada una de sus selecciones, habría alguna manera de hacer esto de una manera limpia? Me podrías ayudar a ver donde estoy fallando porfavor.
import React, { useState, useEffect } from "react"; import axios from 'axios';
const Vehicle = () => {
const [placa, setPlaca] = useState("");
const [color, setColor] = useState("");
const [tipo, setTipo] = useState("");
const [idUsuario, setIdUsuario] = useState([]);
const [idCelda, setIdCelda] = useState([]);
// console.log(idCelda);
console.log(idUsuario)
const handleSelect = (e) => {
const option = e.target.value;
console.log(option);
}
const gettingUsers = async () => {
await axios.get('http://localhost:4500/api/v1/usuarios')
.then(res => {
const usuarios = res.data.user;
console.log(usuarios);
setIdUsuario(usuarios);
})
.catch(err => console.log(err));
}
const gettingCeldas = async () => {
await axios.get('http://localhost:4500/api/v1/celdas').then((response) => {
const celdas = response.data.celdas;
console.log(celdas);
setIdCelda(celdas);
});
};
useEffect(() => {
gettingCeldas();
}, []);
useEffect(() => {
gettingUsers();
}, []);
const onSubmit = (e) => {
e.preventDefault();
const newVehicle = {
placa,
color,
tipo,
idUsuario,
idCelda
};
console.log(newVehicle);
axios.post('http://localhost:4500/api/v1/vehiculos', newVehicle)
.then(res => console.log(res.data));
}
return (
<div>
<form onSubmit={onSubmit} >
<div>
<input
type="text"
className="new__vehicle"
placeholder="Placa del vehiculo"
value={placa}
onChange={(e) => setPlaca(e.target.value)}
autoFocus
required
/>
</div>
<div>
<input
type="text"
className="new__vehicle"
placeholder="Color del vehiculo"
value={color}
onChange={(e) => setColor(e.target.value)}
required
/>
</div>
<div>
<input
type="text"
className="new__vehicle"
placeholder="Que tipo de vehiculo es?"
value={tipo}
onChange={(e) => setTipo(e.target.value)}
required
/>
</div>
<div>
<select onClick={handleSelect}>
<option value="">Seleccionar un usuario</option>
{ idUsuario.map(user => ( <option key={user.id} value={user.id}>{user.nombre}</option>))}
</select>
</div>
<div>
<select onClick={handleSelect}>
<option value="">Seleccionar una celda</option>
{ idCelda.map(celda => ( <option key={celda.id} value={celda.celdaNumero}>{celda.celdaNumero}</option>))}
</select>
</div>
<button className="btn__vehicle">
Agregar Vehiculo
</button>
</form>
</div>
);
};
export default Vehicle;
Here I have some photos where it is evident that it is trying to send the whole array, when it should only be a user, because there I am a little confused.