React.js show detailed info of a list

Question

How can I achieve to show detailed page from a search function??

for example I have the data from the API call to be rendered in a list, but then I would like to hit the "more" link and show a detailed page of the selected list

example link: https://master.d1y6j5rvhgf8yj.amplifyapp.com/ with the initial data it works, but after I search it still direct to initial data

const findArticlesQuery = (query) => {
 axios.get(url)
  .then(res => {                
   [res.data].map((val) =>(        
     setArticleData(val.articles)        
   ))                                     
   }).catch(error => {
       console.log(error.response)
   });
 }

useEffect(
 () =>{
  findArticlesQuery();
  } ,[]
) 

and then I have the article List but not sure how to create a detailed page,

<ArticleListItem articlesData={articleData}/> 

const articleDataItem = articlesData.map((value, idx)=> (   
  <li key={idx} className="collection-item">
    <span>{value.title}</span>
    <a href={`/article/${idx}`}>More</a>     <--- I want to use this button to show detailed info            
  </li>
))   

I can achieve this with router and matching params but only with the initial data, If I use the search function and the articlesData is updated, the link would still get the initial data and not the searched

I also must say that I have the useEffect on the App component which reset the data when I go to another page

Answer 1

In detail page, you shouldn't use index of list for show detail.

You should use a unique attribute of the data to display details. example: data: [{code: 'abc', title: '...'}, {code: '', title: ''}...]

const articleDataItem = articlesData.map((value, idx)=> (   
  <li key={value.code} className="collection-item">
    <span>{value.title}</span>
    <a href={`/article/${value.code}`}>More</a>     <--- I want to use this button to show detailed info            
  </li>
))

In detail page, Search by received code value