1

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;

Tabla clients: introducir la descripción de la imagen aquí Tabla rooms: introducir la descripción de la imagen aquí

Si no se entiende algo, por favor me lo hacen saber para explicarlo un poco mejor, muchas gracias!

1 respuesta 1

0

Puedes utilizar el método set de la base de datos de Firebase para agregar un nuevo registro a la tabla que deseas.

Aquí tienes un ejemplo de cómo podrías hacerlo desde un componente de React que contiene dos select con los valores de la tabla clients y rooms:

import firebase from 'firebase/app';
import 'firebase/firestore';

function MyForm() {
  const [client, setClient] = useState('');
  const [room, setRoom] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    firebase.firestore().collection('reservations').add({ client, room });
  }

  return (
    <form onSubmit={handleSubmit}>
      <select value={client} onChange={event => setClient(event.target.value)}>
        {clients.map(client => (
          <option key={client.id} value={client.id}>
            {client.name}
          </option>
        ))}
      </select>
      <select value={room} onChange={event => setRoom(event.target.value)}>
        {rooms.map(room => (
          <option key={room.id} value={room.id}>
            {room.name}
          </option>
        ))}
      </select>
      <button type="submit">Save</button>
    </form>
  );
}

En este ejemplo, se utiliza el método add de la colección reservations para agregar un nuevo registro con los valores actuales de client y room.

Espero que te ayude mi aporte!

1
  • Garekox, al momento de usar el setClient y el setRoom, esta guardando solo las id de cada una de las tablas, como hago para que guarde todo el contenido y no solo las id, muchas gracias y disculpa por la demora
    – Victor
    el 8 ene. a las 21:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.