How can I access a variable from a script inside a React component?
I am performing device detection on Node and sending the resulting object to the client (React) within index.ejs.
<script type="text/javascript">window.deviceType = <%- deviceType %></script>
While I am able to console.log window.deviceType successfully inside the React component, attempting to use it results in an error stating "error, window is not defined."
.For instance, within the React component:
return(
<div>
<Menu.Item>
{window.deviceType.isMobile ? (
<Link to="/">
<h1>React Boilerplate 23</h1>
</Link>
) : (
<div>PROBLEM</div>
)}
</Menu.Item>
<div type="button" onClick={() => console.log(window.deviceType)}>
XX
</div>
</div>
)
While I can easily console.log the variable, using it in logic as shown above causes rendering issues while still allowing for successful console logging.
The same issue arises when trying the following approach:
<script type="text/javascript">var deviceType = <%- deviceType %></script>