how to make a search bar reactjs - reactjs

Question

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>
))}
</>
);
}

Answer 1

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>
))}
</>
);
}