Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 138249

React.js, create search function to API call for list of articles without unique ID

$
0
0

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)

Viewing all articles
Browse latest Browse all 138249

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>