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

function Draft({ item }) {
  const [note, setNote] = useState('');
  return (
    <label>
      Note for {item}
      <input value={note} onChange={(event) => setNote(event.target.value)} />
    </label>
  );
}
function App() {
  const [item, setItem] = useState('basket');
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <button
        onClick={() => setItem((value) => (value === 'basket' ? 'stool' : 'basket'))}
      >
        Switch item and clear draft
      </button>
      <Draft key={item} item={item} />
    </main>
  );
}

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