tengo un componente en el cual tengo un formulario, dentro de este formulario tengo 2 select ( cada select muestra información traida de las tablas clients y rooms de Firestore), lo que necesito hacer es que cuando tenga seleccionado 1 valor de la tabla clients y 1 valor de la tabla rooms, mandar a guardar en otra tabla de firestore todos los valores de ambas tablas, aca mi codigo:
const CreateConsolidado = () => {
//1 - configuramos los hooks
const [selectedOption, setSelectedOption] = useState('');
const [items, setItems] = useState([]);
const [itemsClients, setItemsClients] = useState([]);
//2 - referenciamos a la DB firestore
const CollectionRooms = collection(db, "rooms");
const CollectionClients = collection(db, "clients");
//3 - Funcion para mostrar TODOS los docs
const getItems = async () => {
const data = await getDocs(CollectionRooms);
setItems(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};
const getItemsClients = async () => {
const dataClients = await getDocs(CollectionClients);
setItemsClients(
dataClients.docs.map((doc) => ({ ...doc.data(), id: doc.id }))
);
};
const handleChange = (event) => {
console.log(event.target.value);
setSelectedOption(event.target.value);
};
useEffect(() => {
getItems();
getItemsClients();
}, []);
const navigate = useNavigate();
function MyRouteComponentName() {
const location = useLocation();
return location.state.names;
}
// const options = items.map((val) => ({ value: val, label: val }));
return (
<div className="container">
<div className="row">
<div className="col">
<div>
<h1>Create {MyRouteComponentName()}</h1>
<form>
<div className="mb-3">
<label className="form-label">Cliente:</label>
<select onChange={handleChange}>
{itemsClients.map((item) => (
<option key={item.dni} value={item} >
{item.name + " " + item.lastName}
</option>
))}
</select>
</div>
<div className="mb-3">
<label className="form-label">Cuarto:</label>
<select>
{items.map((item) => (
<option
key={item.roomName}
value={item}
>
{item.roomName}
</option>
))}
</select>
</div>
<button type="submit" className="btn btn-primary">
Guardar
</button>
</form>
</div>
</div>
</div>
</div>
);
};
export default CreateConsolidado;
Si no se entiende algo, por favor me lo hacen saber para explicarlo un poco mejor, muchas gracias!