How to catch the dynamic part of the URL in react router

Question

I have this route which calls PriceWithId function

<Route path='/collections/:pId' component={PriceWithID} />

The function is like this

const PriceWithID = ({match}) =>
    {
        let test = Object.entries(match);
        let test2 = test.filter(([prop])=>(prop === 'params'));
        let test3 = test2[0][1];
        let test4 = Object.values(test3)[0]
        return(
          <Price image={IMGS.filter((i)=>(i.id === parseInt(test4,10)))[0]}/>
        );
    }

I know there is a nicer oneline way to achieve test4. The method I used came with trial and error. Can anyone tell me the nicer way so that I can replace test4 in parseInt with it

kennysliding · Accepted Answer · 2020-10-17 17:22:24Z

2

use this.props.match.params.pId

or with functional component

const PriceWithID = (props) =>
    {
        let pId = props.match.params.pId
        return(
          <Price image={IMGS.filter((i)=>(i.id === parseInt(pId))[0]}/>
        );
    }

edited Oct 17, 2020 at 17:22

answered Oct 17, 2020 at 17:16

kennysliding

3,0051 gold badge16 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Soumalya Bhattacharya Over a year ago

Thanks @Burning Alcohol

Soumalya Bhattacharya · Accepted Answer · 2020-10-17 18:11:49Z

0

The previous answer can be improved upon this way:

const PriceWithID = ({match}) =>
    {
        return(
          <Price image={IMGS.filter((i)=>(i.id === parseInt(match.params.pId,10)))[0]}/>
        );
    }

But as the previous solution was correct I marked it as answer.

answered Oct 17, 2020 at 18:11

Soumalya Bhattacharya

7543 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to catch the dynamic part of the URL in react router

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related