1
const userdata = [
{
    id:1,
    name:"kuber",
    phone:"8989"
},
{
    id:2,
    name:"sahil",
    phone:"9696"
}

];
export default userdata

From this to>>> <Route path={"user/:id"} component={user} />

What code should i use in "User" component if useParams has id=1 then how to show only id 1, name kuber, phone 8989

A.R.SEIF
  • 865
  • 1
  • 7
  • 25
kuber
  • 105
  • 1
  • 1
  • 5
  • if forward object in path when path not friendly and And it is not suitable for SEO – A.R.SEIF Sep 27 '20 at 08:35
  • you should this answer [multiple-params-with-react-router](https://stackoverflow.com/questions/37696391/multiple-params-with-react-router) – A.R.SEIF Sep 27 '20 at 08:43

1 Answers1

3

In the simplest way you can do it like this:

in your User.js/jsx import the userData. Then you can get the id from url using props.match.params.id and then you can filter from userData from that props.match.params.id . Note: You need to do this inside so every time id changes it gets the user of that id

useEffect(()=>{

 // your code here
 
},[props.match]);
Haque
  • 175
  • 2
  • 12
  • thanks for answering this using filter only return one value can you help me out what exactly I code to follow to achieve all elements in id = 1 – kuber Sep 27 '20 at 08:36
  • if you `let user = userData.filter(user => user.id === props.match.params.id);` The user object contains all the data for user with id 1 – Haque Sep 27 '20 at 08:39
  • 1
    My bro work well thanks a lot for this dynamic routing works `useEffect(()=>{ let user = userdata.filter(user => user.id == id); setnam(user) console.log(id) console.log(user) },[id]) return( <>

    Description

    {nam.map(myuser=>(
  • {myuser.name}
    • ))}
> )` – kuber Sep 27 '20 at 10:01