CODEWITHSUNDEEP
reactjsfirebasegoogle-cloud-firestore
FessqeR
FessqeR

Reputation: 21

How to make a search box with React JS firestore

Code Help me pls How to make a search box with React JS firestore

How can I add a search to the code? Please help.

?

import firebase from "../firebase";

import "./row.css";

function useAksiyon() {
  const [aksi, setAksi] = useState([]);
  useEffect(() => {
    firebase
      .firestore()
      .collection("aksiyon")
      .onSnapshot((snapshot) => {
        const newAksi = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setAksi(newAksi);
      });
  }, []);
  return aksi;
}

const AksionList = () => {
  const aksi = useAksiyon();

  return (
    <div className="row">
      <h3>Aksiyon Filmleri</h3>
      <div className="row__posters">
        {aksi.map((aksiyon) => (
          <a href={aksiyon.movies_iframe} key={aksiyon.movies_id}>
            <img
              className="row__poster"
              src={aksiyon.movies_poster}
              alt={aksiyon.movies_title}
            />
          </a>
        ))}
      </div>
    </div>
  );
};

export default AksionList;

Help plss How to make a search box with React JS firestore

Upvotes: 1

Views: 293

Answers (1)

Nibrass H
Nibrass H

Reputation: 2497

If you want to search in a specific collection, then you can save the word written in the search box to a variable and then make a query as following:

db.collection("aksiyon").where("capital", "==", YOUR_SEARCH)
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });

Upvotes: 1

Related Questions