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

const stock = [
  { id: 'basket', name: 'Market basket' },
  { id: 'stool', name: 'Folding stool' },
];
function Row({ item }) {
  return (
    <li>
      <label>
        {item.name} note
        <input aria-label={item.name + ' note'} defaultValue="" />
      </label>
    </li>
  );
}
function App() {
  const [reversed, setReversed] = useState(false);
  const rows = reversed ? [...stock].reverse() : stock;
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <button onClick={() => setReversed((value) => !value)}>Reverse order</button>
      <ul>
        {rows.map((item) => (
          <Row key={item.id} item={item} />
        ))}
      </ul>
    </main>
  );
}

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