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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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