i want to have a dropdown of firebase document but can`t get the values-CodePudding

I have edited and works fine, but i want to add that list of email_id in the dropdown but doesn`t works

i know it has to be stored in the array but cant get idea hot it works

  var email_user=[];
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState(email_user);

try {
      dob.collection("users")
      .where('email_id', '!=', "")
      .get()    
    .then((querySnapshot) => {
        querySnapshot.forEach((doc, i) => {
            // console.log(doc.id, " => ", doc.data());
            console.log(doc.data().email_id)
            for (let i = 0; i < doc.data().length; i  ) {
              email_user[i] = doc.data().email_id[i];
              console.log("email_user : ", email_user[i])
            }
        });
    })
    .catch((error) => {
        console.log("Error getting documents: ", error);
    });
    } catch{
      console.log("Error")
    }
   
      



       <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
      />

the log for the fetch function works fine and shows emails perfectly in the below way

 LOG  [email protected]
 LOG  [email protected]
 LOG  [email protected]
 LOG  [email protected]
 LOG  [email protected]
 LOG  [email protected]

CodePudding user response：

You'll want to load the list of email addresses into items within an effect hook.

For example, create a function to retrieve the email_id properties as an array

const getUserEmails = async () => {
  const { docs } = await dob
    .collection("users")
    .where("email_id", "!=", "")
    .get();

  return docs.map((doc) => doc.data().email_id);
};

Then call it in your component's on-mount effect hook and map the results to the Item Schema required by the dropdown component before setting them into setItems.

const [items, setItems] = useState([]);

useEffect(() => {
  getUserEmails()
    .then((emails) => {
      setItems(emails.map((email) => ({ label: email, value: email })));
    })
    .catch(console.error);
}, []);

CodePudding user response：

this is my code that i have done can you define me briefly, how to make your code happen brother

const test =() =>{
try {
  dob.collection("users")
  .where('email_id', '!=', "")
  .get()    
.then((querySnapshot) => {
    querySnapshot.forEach((doc, i) => {
        // console.log(doc.id, " => ", doc.data());
        console.log(doc.data().email_id)
        for (let i = 0; i < doc.data().length; i  ) {
          email_user[i] = doc.data().email_id[i];
          console.log("email_user : ", email_user[i])
        }
    });
})
.catch((error) => {
    console.log("Error getting documents: ", error);
});
} catch{
  console.log("Error")
}
console.log("finish")

}