I solved it by using UseRouteMatch in the component and then sending the whole data to the component, and filtering the one i clicked on out. Like the following
const Anecdote = ({ anecdote, all }: any) => {
console.log('anecdote is ', anecdote)
console.log('path is ',useRouteMatch())
console.log('all is ', all)
let {path, url} = useRouteMatch()
console.log('id is ',url.split('/')[2])
const data = all.find((alll: any) => alll.id === url.split('/')[2])
return (
<div>
<h2>{data.content}</h2>
<p>{data.author}</p>
<p>{data.info}</p>
<p>{data.votes}</p>
{/* <div>{note.user}</div> */}
{/* <div><strong>{note.important ? 'important' : ''}</strong></div> */}
</div>
)
}
Thanks