CODEWITHSUNDEEP
reactjsreact-router-dom
pedrofromperu
pedrofromperu

Reputation: 105

ReactJS : How to useParams?

Im kinda struggling with a simple filter method on ReactJS.

Whenever I use the useParams it brokes my filter function.

I find no documentation/tutorials without incrementations or buttons about useEffect & useState.

I hope anyone can help, thanks.

Details.js

const Details = () => {

 const Employees = [
 {
   name: "Platon",
   id: 1
 },
 {
   name: "Solane",
   id: 2
 },
 {
   name: "Sedal",
   id: 3
 }
 ]

const foundEmployee = Employees.find((Employee) => {
 return Employee.name === 'Platon'
})

console.log(foundEmployee) // returns "Platon"

return (
   <div></div>
 )
}

export default Details;

Details.js with useParams

import { useParams } from 'react-router-dom';

const Navigation = () => {

 let name = useParams()
 console.log(name) // returns "Platon"

 const Employees = [
   {
     name: "Platon",
     id: 1
   },
   {
     name: "Solane",
     id: 2
   },
   {
     name: "Sedal",
     id: 3
   }
   ]

 const foundEmployee = Employees.find((Employee) => {
   return Employee.name === name
 })
 
 console.log(foundEmployee) // returns Undefined
 
 return (
     <div></div>
   )
 }
 

export default Navigation;

Upvotes: 0

Views: 3412

Answers (2)

mubasshir00
mubasshir00

Reputation: 349

useParams() let you access the parameters of the current route

to access parameters using useParams() you need to destructure.

let {name} = useParams() // access name paramter of the current route
let {id} = useParams() //access id parameter of the current route .

Upvotes: 0

Liel Fridman
Liel Fridman

Reputation: 1198

Note that useParams returns key-value pairs. Maybe destructuring it will help? Like this:

let { name } = useParams() instead of let name = useParams()

Upvotes: 1

Related Questions