Ad

Why Can't I Pass An Object From My Mapped State As A Parameter In My React Route Link

- 1 answer

So i'm having trouble passing a value from an object in my mapped state as a parameter. I looked around and this seems to be working for everyone else i can find.

I have also tried to add it as a state or by including it as a query after the pathname

Shoppinglist.map(Order =>
                    <tr key={Order.orderId}>
                        <td>{Order.date}</td>
                        <td>{Order.title}</td>
                        <td>{Order.price}</td>
                        <td>{Order.supplier}</td>
                        <td>
                           <Link to={'/CreateOrder/${Order.orderId}'}>
                            New Order</Link>
                        </td>                   
                    </tr>
                )

And my route looks like this:

<Route path='/CreateOrder/:orderId?' component={CreateOrder} />

The path just turns out like this. Url:"/CreateOrder/${Order.orderId} instead of showing the actual ID after /CreateOrder/

Ad

Answer

Template strings use the back-tick character

You are trying to generate the url using the Template literals (Template strings) methods from javascript, but currently use the wrong character to create it.

Template literals are enclosed by the back-tick ` (grave accent) character instead of double or single quotes

To solve your problem, replace

<Link to={'/CreateOrder/${Order.orderId}'}>
                            New Order</Link>

by

<Link to={`/CreateOrder/${Order.orderId}`}>
                            New Order</Link>
Ad
source: stackoverflow.com
Ad