Send Firebase collection with props React

Smokus 0
Viewed 47

What i'm trying to do and don't know how is to get ridersDoc in parent document and then use it in 2 child documents where I need it. Using React and Firebase.

parent.js

import { db } from "../../firebase-config";
import { addDoc, collection, getDocs } from "firebase/firestore";


export default function CrewMemberCRUD() {
    const [riders, setRiders] = React.useState([]);
    const ridersDoc = collection(db, "ridersCrew");

    React.useEffect(() => {
        const getRiders = async () => {
            const data = await getDocs(ridersDoc);
            setRiders(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
        };

        getRiders();
    }, []);

    return (
        <div className="crewMemberCRUD">
            <CrewMemberSetCreate ridersDoc={ridersDoc}/>
            <CrewMemberRead ridersDoc={ridersDoc}/>
        </div>
    );

Then I try to use props.ridersDoc in:

child1.js

export default function CrewMemberSetCreate(props) {
    const createRider = async () => {
        await addDoc(props.ridersDoc, { 
            firstName: newFirstName,
            lastName: newLastName,
            age: Number(newAge),
            favTrick: newFavTrick,
            dreamTrick: newDreamTrick,
            youtube: newYoutube,
            instagram: newInstagram, 
            isShown: newIsShown,
            img: ""
        });
    };
}

But it doesn't add new rider to the base if I have it like this.

What i have now is creating riders State and ridersDoc in both childs but i think it could be done in parent.

collections react-props firebase reactjs
1 Answers

don't mix your UI with your DB logic, is hard to mantain and debug

you can make a new file with your db getter and setters

example of the file path: src/backend/db/riders

import { db } from "../../firebase-config";
import { addDoc, collection, getDocs } from "firebase/firestore";

const ridersCollRef = collection(db, "ridersCrew");


const createRider = async (riderData) => {
   await addDoc(ridersCollRef, riderData);
};

const getRiders = async () => {
   const data = await getDocs(ridersCollRef);
   return data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};

this way you will save repeating a lot of code, and you will be able to use it anywhere.

this should also solve your problem

now:

import React from "react";
import CrewMemberRider from "./CrewMemberRider";
import { RidersDB } from "../../Backend/DataBase/RidersDB";

const ridersDB = new RidersDB();

export default function CrewMemberRead() {
    const [riders, setRiders] = React.useState([]);
    React.useEffect(() => {
              ridersDB.getRiders()
                 .then(riders => {
                    setRiders(prevRiders => ([ ...prevRiders, riders]);
                 })
    }, []);


    const riderElements = riders.map((rider) => {
        return (
            <CrewMemberRider
                key={rider.id}
                id={rider.id}
                firstName={rider.firstName}
                lastName={rider.lastName}
                age={rider.age}
                favTrick={rider.favTrick}
                dreamTrick={rider.dreamTrick}
                youtube={rider.youtube}
                instagram={rider.instagram}
                img={rider.img}
                isShown={rider.isShown}
            />
        );
    });

    return (
        <div className="crewMemberCRUD">
            <h2>Member List</h2>
            {riderElements}
        </div>
    );
}
CristianDTツ0
Related