import React, { useEffect, useState } from 'react';
export function App() {
  const [title, setTitle] = useState('');
  const [entries, setEntries] = useState<string[]>([]);
  const [error, setError] = useState('');
  useEffect(() => {
    const previous = document.title;
    document.title = `Entries: ${entries.length}`;
    return () => { document.title = previous; };
  }, [entries.length]);
  function submit(event: React.FormEvent) {
    event.preventDefault();
    const value = title.trim();
    if (!value) { setError('Title required'); return; }
    setEntries(old => [...old, value]);
    setTitle(''); setError('');
  }
  return <main><h1>House notes</h1><form onSubmit={submit}>
    <label htmlFor="title">Title</label>
    <input id="title" value={title} onChange={event => setTitle(event.target.value)} />
    <button>Add</button><p role="alert">{error}</p>
  </form><ul>{entries.map((value, index) => <li key={index}>{value}</li>)}</ul></main>;
}