Ad
Props Value Based On A Stored Cookie
Based on a specific value from a stored cookie (selectedRetailerId
) the source (API endpoint) is different.
I'm trying to store the value of the cookie in a variable called retailer_id and use that to make sure the correct endpoint is called.
Here's what I'm trying...
<OTHER CODE IS REDACTED>
ReactDOM.render(
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
var retailer_id = getCookie(selectedRetailerId);
<DeliveryOptionsTable source="http://<REDACTED>/delivery_options/{retailer_id}" />,
document.getElementById('deliveryOptionsContainer')
)
But this returns a Uncaught SyntaxError. Probably because this piece of code should not be in ReactDOM.render
.
Uncaught SyntaxError: http://localhost:8000/src/app.js: Unexpected token (130:2)
128 | }
129 |
> 130 | var retailer_id = getCookie(selectedRetailerId);
| ^
131 |
132 | <DeliveryOptionsTable source="http://<REDACTED>/delivery_options/{retailer_id}" />,
133 | document.getElementById('deliveryOptionsContainer')
What is the right way to do this with React?
Ad
Answer
Try this:
// Defined somewhere outside ReactDOM.render (I'd recommend a helpers.js file)
// If you move it out of this file, be sure to import / require it
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
ReactDOM.render(
<DeliveryOptionsTable source={"http://<REDACTED>/delivery_options/" + getCookie(selectedRetailerId)} />,
document.getElementById('deliveryOptionsContainer')
)
Ad
source: stackoverflow.com
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad