// src/App.jsx

const items = [
  { id: 1, name: "Widget", inStock: true },
  { id: 2, name: "Gadget", inStock: false },
  { id: 3, name: "Gizmo", inStock: true },
];

function InStockList() {
  return (
    <ul>
      {items
        .filter((item) => item.inStock)
        .map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
    </ul>
  );
}

function App() {
  return <InStockList />;
}

export default App;

/*
  Notes:
  - .filter(item => item.inStock) runs first, producing a shorter
    array containing only the in-stock items.
  - .map() then only ever sees the already-filtered array, so
    out-of-stock items never get turned into JSX at all — they're not
    hidden with CSS, they simply never render.
*/