how to make a search bar reactjs

Leticia Fatima :

I have a listing of articles that are displayed on cards. I need to implement a search bar to search for articles.

In the code I make a map in the CardArticle component so that it can be rendered as the back-end sends the information.

In the back-end there is already a route to search: /v1/articles?search=${search}

When the user accesses the article page, he will display all articles and only when he clicks to search will the search be made. And when he deletes the words from the search bar, he will return to displaying all articles.

code:

export default function Articles() {
  const { data: articles } = useSWR(`/v1/articles`, fetch);

  if (!articles) {
    return (
      <div style={{ paddingTop: 90 }}>
        <Loading />
      </div>
    );
  }

  return (
    <>
      <Search>
        <span>
          <IconSearch color={theme.colorsCommon.secundary} />
        </span>
        <input placeholder="Busque por autor ou artigos" />
      </Search>

      {articles.map(article => (
        <Link to={`/articles/${article.slug}`}>
          <CardArticle key={article.guid}>
            <Image>
              <img
                src={!article ? noPhoto : verifyPhoto(article.cover_photo)}
                alt={article.title}
              />
            </Image>

            <TopCard>
              <div className="categorys">
                {article.categories.map(category => (
                  <Category key={category.id}>{category.name}</Category>
                ))}
              </div>
            </TopCard>

            <DetailsArticle>
              <div className="title">
                <span>{article.title}</span>
              </div>
            </DetailsArticle>

            <BottomCard>
              <div className="author">
                <img
                  src={
                    !article.author
                      ? noPhoto
                      : verifyPhoto(article.author.photo)
                  }
                  alt={!article.author ? [] : article.author.name}
                />
                <span>{!article.author ? [] : article.author.name}</span>
              </div>
              <div className="createDate">{formatDate(article.created_at)}</div>
            </BottomCard>
          </CardArticle>
        </Link>
      ))}
    </>
  );
}

Kirill Skomarovskiy :

export default function Articles() {
  const [search, setSearch] = useState('');
  const [debounceSearch, setdebounceSearch] = useState('');
  const { data: articles } = useSWR(
    `/v1/articles${debounceSearch ? `?search=${debounceSearch}` : ''}`,
    fetch
  );
  
  const handleOnChange = useCallback(({ target: { value } }) => {
    setSearch(value);
  }, []);
  
  useEffect(() => {
    const timerId = setTimeout(() => {
      setdebounceSearch(search);
    }, 250);
    
    return () => {
      clearTimeout(timerId);
    };
  }, [search]);

  if (!articles) {
    return (
      <div style={{ paddingTop: 90 }}>
        <Loading />
      </div>
    );
  }

  return (
    <>
      <Search>
        <span>
          <IconSearch color={theme.colorsCommon.secundary} />
        </span>
        <input
          value={search}
          placeholder="Busque por autor ou artigos"
          onChange={handleOnChange}
        />
      </Search>

      {articles.map(article => (
        <Link to={`/articles/${article.slug}`}>
          <CardArticle key={article.guid}>
            <Image>
              <img
                src={!article ? noPhoto : verifyPhoto(article.cover_photo)}
                alt={article.title}
              />
            </Image>

            <TopCard>
              <div className="categorys">
                {article.categories.map(category => (
                  <Category key={category.id}>{category.name}</Category>
                ))}
              </div>
            </TopCard>

            <DetailsArticle>
              <div className="title">
                <span>{article.title}</span>
              </div>
            </DetailsArticle>

            <BottomCard>
              <div className="author">
                <img
                  src={
                    !article.author
                      ? noPhoto
                      : verifyPhoto(article.author.photo)
                  }
                  alt={!article.author ? [] : article.author.name}
                />
                <span>{!article.author ? [] : article.author.name}</span>
              </div>
              <div className="createDate">{formatDate(article.created_at)}</div>
            </BottomCard>
          </CardArticle>
        </Link>
      ))}
    </>
  );
}