Here is a React component that can hold state and share context (within the component, in a “React Island.“)

Here is the code for this page:

//src/pages/auth-context.astro

---
import BaseLayout from '../layouts/BaseLayout';
import AuthApp from '../components/AuthApp.jsx';
import { Markdown } from 'astro/components';
---

<BaseLayout title="Auth State Context">
   <main>

      <Markdown>
         Here is a React component that can hold state (within the component, in a "React Island.")
      </Markdown>
      
      <hr />
      <AuthApp client:load />
      <hr />
      
      <Markdown>
         Here is the code for this page:
      </Markdown>

   </main>
</BaseLayout >

And this is the AuthApp.jsx component that’s being rendered.

//src/components/AuthApp.jsx
import React, { useState } from 'react';
import LogInButton from '../components/LoginButton.jsx';
import LogOutButton from '../components/LogoutButton.jsx';
import AuthContext from '../components/AuthContext.jsx';

const AuthApp = () => {
   const [auth, setAuth] = useState(false);
   
   const login = () => {
      setAuth(true);
   };
   
   const logout = () => {
      setAuth(false);
   };
   
   return (
      <>
         <p>Your logged in status: {auth} </p>
         <AuthContext.Provider value={{ auth: auth, login: login, logout: logout }}>
            <p>{auth ? 'Yay! You are logged in.' : 'You need to click to log in.'}</p>
            <LogInButton />
            <LogOutButton />
         </AuthContext.Provider>
      </>
   );
};
export default AuthApp;

With this context…

// src/components/AuthContext.jsx

import React, { createContext } from 'react';

const AuthContext = createContext({ 
   auth: null,
   login: () => {}, //For the sake of playing with context, I'm holding these functions in context, too. Normally, I wouldn't bother.
   logout: () => {},
});

export default AuthContext;

and some external button components that also accept their functions through context.

//Login Button at src/components/LoginButton.jsx
import React, { useContext } from 'react';
import AuthContext from '../components/AuthContext.jsx';

const LoginButton = () => {
   const auth = useContext(AuthContext);
   return (
      <> //NB: gratuitous fragment, really only necessary if returning more than one element
         <button onClick={auth.login}>Login</button>
      </>
   );
};

export default LoginButton;

//Logout Button at src/components/LogoutButton.jsx
import React, { useContext } from 'react';
import AuthContext from '../components/AuthContext.jsx';

const LogoutButton = () => {
   const auth = useContext(AuthContext);
   return (
      <>
         <button onClick={auth.logout}>Click To Logout</button>
      </>
   );
};
export default LogoutButton;