1  import * as React from "react"
 2  import './FieldNotes.css'
 3  
 4  const dummyNotes = [
 5    "Components encapsulate both the visual representation of a particular piece of UI as well as the state and logic that goes along with it.",
 6    "The same intuition you have about creating and composing together functions can directly apply to creating and composing components. However, instead of composing functions together to get some value, you can compose components together to get some UI.",
 7    "JSX combines the power and expressiveness of JavaScript with the readability and accessibility of HTML",
 8    "Just like a component enabled the composition and reusability of UI, hooks enabled the composition and reusability of non-visual logic."
 9  ]
10  
11  export default function FieldNotes() {
12    const [notes, setNotes] = React.useState<FormDataEntryValue[]>(dummyNotes)
13    const inputRef = React.useRef<HTMLInputElement>(null)
14    const ulRef = React.useRef<HTMLUListElement>(null)
15  
16    const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
17      e.preventDefault()
18      const form = e.target
19      const formData = new FormData(form as HTMLFormElement)
20      const newNote = formData.get("note") as string
21  
22      if (newNote?.trim()) {
23        setNotes(prevNotes => [...prevNotes, newNote])
24        if (inputRef.current?.value) {
25          inputRef.current.value = ''
26        }
27      }
28    }
29  
30    // React.useEffect(() => {
31    //   const lis = ulRef.current?.children ?? []
32    //   const lastLi = lis[lis.length - 1]
33    //   lastLi.scrollIntoView()
34    // }, [notes])
35  
36    return (
37      <article style={{ width: 600 }}>
38        <h1>Field Notes</h1>
39        <div>
40          <ul ref={ulRef}>
41            {notes.map((msg, index) => (
42              <li key={index}>{msg as string}</li>
43            ))}
44          </ul>
45          <form onSubmit={handleSubmit}>
46            <input
47              ref={inputRef}
48              required
49              type="text"
50              name="note"
51              placeholder="Type your note..."
52            />
53            <button className="link" type="submit">
54              Submit
55            </button>
56          </form>
57        </div>
58      </article>
59    )
60  }