bhylu.com

Advertisements

React Conditional Rendering

Choose a meaningful branch so the absence of a record does not look like a broken interface.

How it works

Conditional rendering uses ordinary JavaScript decisions. A ternary suits two small alternatives; an early return can keep larger cases readable. The example distinguishes an empty ready list from a successful list with entries. Both are valid states, so the empty message should be specific and helpful. A loading state and an error state are different cases and should not all share the same vague “nothing here” message.

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 } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

function ReadyList({ items }) {
  if (items.length === 0)
    return (
      <p>No items are ready today. Check the desk notice for the next collection.</p>
    );
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}
function App() {
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <ReadyList items={[]} />
    </main>
  );
}

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

Expected result

The page shows a clear empty-state message instead of a blank list.

The condition checks the actual array length. If you write count && <List />, a zero count can appear as the text 0 because React renders numbers. Use count > 0 when the intention is a boolean decision. Name several complex conditions before returning so the view reads as an interface rather than a puzzle of nested operators.

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

Advertisements