React Hooks and DOM events #327
-
|
I'm trying the docs. Successfully set up using Nix on M1 Mac. Bit of a long process and a few failures (reactivated version 0.36.1 not found, activating environment not in docs etc...). My biggest question is that react hooks (UseEffect, useState) and button events like onClick, console.log() do not seem to be working. Django data renders perfectly on tsx files. a simple example is: import {templates} from "@reactivated";
...
<button onClick={(e)=>(
setCounter(count+1)
)}>Add to counter +</button>
<button onClick={(e)=>(
console.log('hi')
)}>Add to counter +</button> or <button onClick={(e)=>{
e.preventDefault()
alert('hi')
}}>Alert</button>
</div>The above examples have no output. If you try a simple console.log() in an empty useEffect, nothing renders in console as well. I understand if there's no useEffect since data is shipped with component from django, hence not a lot of async/fetch needed when using reactivated (and hence its creation as well), but not sure why other react functionalities are not working. Overall, this package is something I had been waiting for YEARS and great work overall!!! |
Beta Was this translation helpful? Give feedback.
Answered by
silviogutierrez
Feb 14, 2024
Replies: 2 comments 2 replies
-
|
@geoffreynyaga : sounds to me like the client isn't hydrating. That is, client side scripts aren't running at all. Has nothing to do with React or hooks. Can you post the logs of a setup from scratch (using the nix one liner on the website)? And maybe look at the console in the Chrome Inspector when you load the website? |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Ok. i have re-done the setup from the one-line script nix-shell -E "$(curl -L https://reactivated.io/install/)"I have pasted the results below . The only warning I have seen is the Updated issue: loading react hooks when not using
|
Beta Was this translation helpful? Give feedback.
2 replies
-
|
@geoffreynyaga it's very simple, Layout isn't special. But if you remove it, you're not including the client scripts at all. Nothing is executing. <script
defer
crossOrigin="anonymous"
src={`${context.STATIC_URL}dist/index.js`}
/>So no JS is running. So be sure to include client scripts in whatever you use to replace |
Beta Was this translation helpful? Give feedback.
Answer selected by
silviogutierrez
-
|
By the way, I'm working on a possible switch to Vite that will include these automatically for you. |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@geoffreynyaga it's very simple, Layout isn't special. But if you remove it, you're not including the client scripts at all. Nothing is executing.
So no JS is running. So be sure to include client scripts in whatever you use to replace
Layout.