ReferenceError: time is not defined | React Hooks and Firebase

I have a Time picker and I’m trying to make it possible that when you click on the button the time that is past in gets send to the DB in Firebase. I know I did something wrong, but for god’s sake, I don’t know what! 🤦‍♀️

The time picker :

<Container className={classes.cardContainer}>
              <TextField
                id="time"
                label="Zeit"
                type="time"
                defaultValue="07:30"
                InputLabelProps={{
                  shrink: true,
                }}
                inputProps={{
                  step: 300, // 5 min
                }}
                onChange={(event) => {
                  setDelay(event.target.value);
                }}
                
              />
              <Button className={classes.cardBtn} onClick={DelayMorning}>Absenden</Button>
            </Container>

The React Hooks:

export function MorningDelay() {
    const [timing, setTiming] = useState([])
    useEffect(() => {
        db
        .collection('delayInTheMorninh')
        .set({
            time,
            reason, 
        })
        .then((snapshot) => {
            if (snapshot.exists) {
                setTiming(snapshot.data());
            } else {
              console.log("does not exist");
            }
        })
    }, [])
    return timing
  }

After trying this, I got an Error :

enter image description here

Answer

You are getting an error because you do not have the variable time and reason declared in your scope yet you are trying to access them in the here:

db.collection('delayInTheMorninh').set({time, reason,})

Both time and reason ought to be defined for you to access them and store them in the database. In addition, I do not think firebase a returns a document snapshot of the saved file when you call the set method. Also, the set method should be called with a preset document id. So your line for saving the dodcument to the database should be

db.collection('delayInTheMorninh').doc('someId').set({time, reason,})

Furthermore, you need to review your application of the useEffect hook. In the case of your application, only use it to fetch data from the database when the component loads. Do not use it to save data to the database, because I cannot see a way that you can trigger this manually with the button, without creating more complicated problems for your logic. Check out the react docs Using the Effect Hook for a more detailed breakdown

Assuming the intention of your component is to save the time and reason to the database, you could edit it to look something like this

export function MorningDelay() {
    const [time, setTime] = useState('7:30')
    const [reason, setReason] = useState('')
    const [timing, setTiming] = useState([])

    //Pass this onChange handler to the time input field
    function handleTime(e) {
        setTime(e.target.value)
    }

    //Pass this onChange handler to the deadline input field
    function handleReason(e) {
        setReason(e.target.value)
    }

    //if you must use .set method, generate randomId or use a custom method for determining your Ids (checkout docs for .add alternatives)
    const docId = uuid4()

    //pass this onClick function to the button
    function delayMorning(e) {
        e.preventDefault() //prevent reload when using a form
        db.collection('delayInTheMorning').doc(docId).set({
            time, 
            reason
        }).then(() => {
            //If you wish to push the written data to your local state, you can do it here
            setTiming([...timing, {time, reason}])
            console.log('Documents saved succesfully')
        }).catch((err)=> {
            console.log(err)
        })
    }

    //If you wish to access the saved files in this component, or another component. You can use the useEffect hook
    useEffect(() => {
        db.collection('delayInTheMorning').get().then((data) => {
            const docs = data.docs.map(doc => {
                return {...doc.data(), id: doc.id}
            })
            setTiming(docs)
        }).catch((err) =>{
            console.log(err)
        })
    })

  }