Problem with button interaction and useState

Eman134 commented 1 year ago

Prerequisites

We do our best to reply to all the issues on time. If you will follow the given guidelines, the turn around time will be faster.

Ensure the issue isn't already reported.

Delete the above section and the instructions in the sections below before submitting

Description

Hi, I've been trying to use radonis to get react and adonisjs together, and I've run into a problem. I created a new project to learn how to use the lib and followed the installation step by step and saw the example repository. I'm now trying to interact with a button and it updates the page with the new useState information from react, but I click on the button and nothing happens.

import { island } from '@microeinhundert/radonis'
import { useState } from 'react'

function SomeInteractiveIsland () {
  const [count, setCount] = useState(0)

  function handleClick () {
    setCount(count + 1)
  }

  return <button type="button" onClick={handleClick}>Click me {count}</button>
}

// The first argument should be a unique name for the island
export default island('SomeInteractiveIsland', SomeInteractiveIsland)

This is the code I'm trying to make, and on the main page it looks like this

import { useI18n } from '@microeinhundert/radonis'
import { BaseLayout } from 'Layouts/Base'
import { HydrationRoot } from '@microeinhundert/radonis'
import SomeInteractiveIsland from 'Components/SomeInteractiveIsland.island'

function Index () {
  const { formatMessage$ } = useI18n()

  const messages = {
    title: formatMessage$('home.index.title'),
  }

  return (
    <BaseLayout>
      <h1>{messages.title}</h1>
      <p>This is an empty view.</p>
      <HydrationRoot>
        <SomeInteractiveIsland />
      </HydrationRoot>
    </BaseLayout>
  )
}

export { Index }

I don't know if I need to do some more configuration, but I also tested it with another lib and it didn't work either, what do I do?

Package Version

"@adonisjs/core": "^5.9.0",
"@adonisjs/repl": "^3.1.11",
"@adonisjs/session": "^6.4.0",
"@adonisjs/shield": "^7.1.0",
"@adonisjs/view": "^6.2.0",
"@microeinhundert/radonis": "^5.0.0",
"@microeinhundert/radonis-server": "^5.0.0",
"@microeinhundert/radonis-unocss": "^5.0.0",
"proxy-addr": "^2.0.7",
"reflect-metadata": "^0.1.13",
"source-map-support": "^0.5.21"

Error Message & Stack Trace

Relevant Information

Images