bhylu.com

Advertisements

React Events

Keep user-triggered work in an event handler and give every button an honest effect.

How it works

React event props receive functions. The handler runs in response to an event rather than while the component describes its output. Use an explicit button type inside forms so an incidental action does not submit the form. This example records a local acknowledgement and announces the result. It does not pretend to contact a lending server or reserve an item. Event names and state labels should make that boundary obvious.

Run the code

Use a separate empty lab folder with Node 22.12+ in the 22 series. Save the files below using their displayed paths; browsers may download only the basename, so create src, public or tests folders as listed. The pinned project uses React and React DOM 19.3.1 with Vite 7.3.1. Run npm install, then npm run dev and open the local address Vite prints. React examples do not run in Bhylu’s current playground.

No Apache, MySQL or change to Bhylu’s server configuration is needed. These are local teaching projects, not a publishing package. Keep generated dependencies and lockfiles in your own lab. Review the project setup.

Example

src/main.jsx

import React, { StrictMode, useState } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

function App() {
  const [read, setRead] = useState(false);
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <button type="button" onClick={() => setRead(true)}>
        Mark notice read locally
      </button>
      <output aria-live="polite">
        {read ? 'Notice read on this page' : 'Notice unread'}
      </output>
    </main>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Expected result

Clicking the button changes the local message; refreshing starts again with the notice unread.

The inline arrow is short and only requests a state change. React calls the handler with its event object when needed, so a named function could read event.currentTarget as well. The live output makes this small feedback available without moving focus. Local state is not permanent saving. A real acknowledgement system would need a defined persistence and identity contract.

For API contracts and version differences, use React’s official documentation.

Advertisements