1

How can I put the data from firestore into my html?

Im making a ToDo list app project and this is my function for making tasks:

const Task = async (name, desc, dueDate) => {
    return await setDoc(doc(db, "projects", name), {
        name,
        id: crypto.randomUUID(),
        desc,
        dueDate,
        completed: false
    })
}

the probelm I have is that to my understanding you cant use promises in components and if I want to get data from the database it uses promises, so how am I gonna do it then?

I tried doing this:

function App() {
  
  const taskRef = doc(db, "projects", "first task")
  const taskSnap = getDoc(taskRef)

  return (
    <div>
    {taskSnap.data()}
    </div>
  )
}

but the taskSnap is a pending promise, and I cant use async / await in the App component

pharellwilliams
  • 19
  • 1
  • should I do `[task, setTask] = useState({ name, desc, etc })` and then store the `task` in the firestore? – pharellwilliams Apr 03 '22 at 17:53
  • Almost: you should indeed use a state hook and then call `setTask` with the data you get from Firestore. See for an example (using the older `setState` method rather than `useState` hook): https://stackoverflow.com/questions/53530492/react-firestore-return-a-variable-from-a-query/53530991#53530991 – Frank van Puffelen Apr 03 '22 at 20:55

0 Answers0