I'm creating a very simple app with a list of articles and a search function.
I initially make an axios call and set the state to show a list of 10 articles, then I have a function when the user search that it update the state to show a list matching his search. On each element I have a link to show more info of the article. The problem is that when I click on more it only match the initial list and not the update list after the search.
I have a component showing a list of articles with a link to a component showing more details of the article:
const articleDataItem = articlesData.map((value, idx) => (
<li key={idx} className="collection-item">
<span>{value.title}</span>
<a href={`/article/${idx}`}>More</a>
</li>
));
First, I have a Restful api call by default to get a list of 10 articles using the useEffect
hook, and when a person clicks on more, they get more details of the article, but when I search I update the state to match the list with what the user is searching but if I click on more, I still get only the data of the initial list, so its not matching the search,.
useEffect(
() => {
findArticlesQuery();
}, []
)
const findArticlesQuery = (query) => {
axios.get(`${url}${query}`)
.then(res => {
[res.data].map((val) => (
setArticleData(val.articles)
))
})
}
The problem is that in the component of the specific article I only get the data of the default initial call and I don't get the data when the user search. I think the articleData
gets reset when I go to the Article
component. So, even if I search, when I click on more, I only get the data as if I had not make any search (the initial list of articles).
<Route exact path="/" render={() => <ArticleListItem articlesData={articleData} />} />
<Route path="/article/:id" render={() => <Article articlesData={articleData} />} />
So initially if click on the link of the first article I get the data correctly but If i search and I click in the first result, I'm still getting the data of that first initial article, so its not matching the data.
const handleSubmit = (e) => {
e.preventDefault();
findArticlesQuery(e.target.search.value)