how to search in react js firebase?

Question

  "-Kqpdfjp2Q9cAuqZHY5w" : {
    "email" : "test@apple.com",
    "gamerTag" : "ok"
    },
      "-Kqpdx7Xpwht-E1K4in0" : {
    "email" : "Human@human.com",
    "gamerTag" : "ok"
  }

The question which I am trying to ask is if there is a way to search if the email is taken. I have tried several methods but they don't seem to work. Also if someone could explain what I did wrong, that would be helpful. I always want to learn from my mistakes

One Method:

goalRef.once('value', function(snapshot) {
    if (snapshot.hasChild("test@apple.com")) {
        alert('exists');
    }else
    {
        alert('maybe');
    }
});

Second Method:

    let human = goalRef.orderByChild("email").equalTo("test@apple.com");
    human.update({
        "email": "mat@gmail.com"
    })

The second method is to update but that isn't working either.

goalRef = firebase.database().ref('human');

See https://stackoverflow.com/questions/44961981/retrieve-and-check-whether-a-particular-user-enter-email-is-present-in-firebase/44962311#44962311. That specific answer is for Android, but the approach is the same across all technologies. — Frank van Puffelen, Aug 08 '17 at 04:21

Mohammed Rampurawala · Answer 1 · 2017-08-08T15:34:23.073

As you question suggests that you want to check if email address exists or not.

You can go for second method as it will be more efficient than that of first one because in first method you need to iterate over all the values as your user base grow,

Therefor go for second approach and Firebase will take care of searching the value into the DatabaseReference.

firebaseDB.ref("human")
            .orderByChild("email")
            .equalTo("test@apple.com")
            .on('value', function (snapshot) {
                if (snapshot.val() === null) {
                    console.log('Email is not present');
                }else{
                    console.log('Email is present');
                    var key = snapshot.key;
                    var childData = snapshot.val();
                    //Your Code goes Here
                }
            });

Note: Don't forget to add index on email field for more efficient searching

Thanks

@NiralPatel Thats great. I hope it helped. If it solved your solution then please mark it as accepted and it will helpful for others to refer in future... Thanks :) — Mohammed Rampurawala, Aug 08 '17 at 15:33

score 0 · Answer 2 · edited Nov 25 '21 at 13:50

Firebase 9 Search on React

import { useState , useEffect } from "react"
import { db } from "../../firebase";
import { collection, onSnapshot , where, query, orderBy , limit } from '@firebase/firestore'

export default function search() {
    const [Data , setdata] = useState('')
    const [search ,setSearch]=useState('')
    const searchRecords= (e)=>{
e.preventDefault();

const collectionref=collection(db , "news");
    const q = query(collectionref , where("Heading" , ">=" , '${search}') , orderBy("Heading","asc"));      //
    const unsub= onSnapshot(q,(snapshot)=>
      setdata(snapshot.docs.map(doc=>({...doc.data(),id:doc.id,key:doc.id})))
    );
    return(unsub);
    }
    

    return (
        <div>
            <h1>Search</h1>
            {/* onKeyUp={searchRecords} onChange={(e)=>setSearch(e.target.value)} */}
            <input className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
             id="username" type="text" placeholder="Username" onKeyUp={searchRecords} onChange={(e)=>setSearch(e.target.value)} />

             <div className="my-2">
             {Data && (
                                    <>
             {Data.map((i, index) => (
                 
                 <h1 key={index}>{i.Heading}</h1>
                 ))}

                 </>
             )}


             </div>

        </div>
    )
}

how to search in react js firebase?

2 Answers2