Блог

У меня есть две кнопки, которые фильтруют, какая категория отображается. Фильтрация работает нормально, и записи отображаются правильно. Прямо сейчас в начале отображается только одна категория. Мой вопрос в том, как мне установить категорию, чтобы она отображала все записи в начале? Вот мой код:

 const [category, setCategory] = useState( "design");

  function useCourses() {
    const [courses, setCourses] = useState([]);

    useEffect(() => {
      db.collection("projects")
        .where("category", "==", category)
        .get()
        .then((snapshot) => {
          let data = [];
          snapshot.forEach((doc) => {
            data.push({
              ...doc.data(),
              id: doc.id,
            });
            return data;
          });

          setCourses(data);
        })
        .catch((e) => {
          console.log(e);
        });
    }, [category]);

    return courses;
  }

  const courses = useCourses();
  

и кнопки:

         <button
          className="projects__controls__button"
          onClick={() => setCategory("web")}
          style={{ color: theme.color, borderColor: theme.color }}
        >
          Web
        </button>
        <button
          className="projects__controls__button"
          onClick={() => setCategory("design")}
          style={{ color: theme.color, borderColor: theme.color }}
        >
          Design
        </button>
  

Спасибо за помощь

Вы могли бы установить начальное значение category как null или пустую строку.

Затем в последующем коде,

 useEffect(() => {
      let collection = db.collection("projects");
      
      if (category) {
         collection = collection.where("category", "==", category);
      }
        
      collection.get()...
.
.
.