MadBl1ss
@MadBl1ss

React как сделать фильтрацию по дате и автору?

В useEffect через axios получаю данные пользователей и их постов.

const Main = () => {
  const [articles, setArticles] = useState([]);
 
  useEffect(() => {
    axios
      .get("https://mocki.io/v1/a5814d24-4e22-49fc-96d1-0e9ae2952afc")
      .then((res) => {
        setArticles(res?.data?.articles);
      });
  }, []);


Далее просто рендерю в карточки
return (
    <>
      <SwiperInfo />
      <div className="main__container">
        {articles.map((article, index) => (
          <Card
            key={index}
            title={article?.title}
            article={article?.content}
            author={article?.author}
            date={article?.publishedAt}
          />
        ))}
      </div>
      <Footer />
    </>
  );

Как сделать фильтрацию c выпадающими списками по имени и по дате? (скриншот)
62baf74087984064114609.png
P.S. Данные прилетают в таком формате:
62baf7da5f549259089846.png
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
0xD34F
@0xD34F
const [ author, setAuthor ] = useState(null);
const [ dateMin, setDateMin ] = useState(null);
const [ dateMax, setDateMax ] = useState(null);

const authors = useMemo(
  () => [...new Set(articles.map(n => n.author))],
  [ articles ]
);
const filteredArticles = useMemo(
  () => [
    [  author, n => n.author === author      ],
    [ dateMin, n => n.publishedAt >= dateMin ],
    [ dateMax, n => n.publishedAt <= dateMax ],
  ].reduce((acc, n) => n[0] ? acc.filter(n[1]) : acc, articles),
  [ articles, author, dateMin, dateMax ]
);

<select value={author} onChange={e => setAuthor(e.target.value)}>
  <option></option>
  {authors.map(n => <option>{n}</option>)}
</select>

от <input type="date" value={dateMin} onChange={e => setDateMin(e.target.value)} />
до <input type="date" value={dateMax} onChange={e => setDateMax(e.target.value)} />

{filteredArticles.map(n => <Card {...n} />)}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы