Pass props from react router Link in reactJS

Question

How can I pass props to another component using React router link?

I tried to do it like this. However, it is not working. By this I mean props are not passing through. I want to pass information of currencies to another component and than use It. Any suggestions?

return <Div>
        <div className="header">
            <Heading>Welcome To CoinValue </Heading>
        </div>
        <Ul>
            {currentItems.map(currencies => {
                return <Link
                    key={uuidv4()}
                    to={`/cryptoValute/${currencies.id}`
                    props={currencies}}><Li>{currencies.name}</Li></Link>
            })}
            <div>
                {this.renderPagination()}
            </div>
        </Ul>
    </Div>

Could you please give a better description of what you look to accomplish with this code? You could simply pass the props to another component without needing to use <Link />. — Alberto Perez
– Alberto Perez, Commented Jul 27, 2020 at 13:43
Does this answer your question? Pass props in Link react-router — k-wasilewski
– k-wasilewski, Commented Jul 27, 2020 at 13:44
@AlbertoPerez I especially need to pass props through the link — Nika Roffy
– Nika Roffy, Commented Jul 27, 2020 at 13:45
@k-wasilewski I'm trying that way but still cant make it tho — Nika Roffy
– Nika Roffy, Commented Jul 27, 2020 at 13:46

Giovanni Esposito · Accepted Answer · 2020-07-27 14:04:25Z

2

Ciao, try to modify your code like this:

return <Div>
    <div className="header">
        <Heading>Welcome To CoinValue </Heading>
    </div>
    <Ul>
        {currentItems.map(currencies => {
            return <Link
                key={uuidv4()}
                to={{pathname: `/cryptoValute/${currencies.id}`, query: {currencies}}}><Li>{currencies.name}</Li></Link>
                
        })}
        <div>
            {this.renderPagination()}
        </div>
    </Ul>
</Div>

Then in your component, to retrieve currencies value you could do this.props.location.query.currencies.

edited Jul 27, 2020 at 14:04

answered Jul 27, 2020 at 13:43

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

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

2 Comments

Nika Roffy Over a year ago

Its giving me synax error on this line to={{pathname: /cryptoValute/${currencies.id}, query: {currencies}}}>`

Giovanni Esposito Over a year ago

Oh, sorry I wrongly put one ` after query. I updated my answer. Check now.

Collectives™ on Stack Overflow

Pass props from react router Link in reactJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related