Importing form

src/components/form.js

@@ -0,0 +1,67 @@
+import React, { useState } from "react"
+
+const Form = () => {
+  const [title, setTitle] = useState('')
+  const [excerpt, setExcerpt] = useState('')
+	const [author, setAuthor] = useState('')
+
+  const handleSubmit = async e => {
+    e.preventDefault()
+
+    try {
+      let payload = {
+        poem: title,
+        excerpt: excerpt,
+				author: author
+      }
+
+      const response = await fetch('/api/save-poem/', {
+        method: "POST",
+        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+        credentials: "omit", // include, *same-origin, omit
+        headers: { "Content-Type": "application/json" },
+        redirect: "follow", // manual, *folslow, error
+        referrer: "client", // no-referrer, *client
+        body: JSON.stringify(payload),
+      })
+
+      const answer = await response.json()
+
+      if (answer.success) {
+        alert(answer.message)
+      }
+      else {
+        alert(answer.errors[0].msg)
+      }
+    }
+    catch (err) {
+      alert('Error connecting to backend:', err)
+    }
+  }
+
+  const handleTitleChange = e => {
+    setTitle(e.currentTarget.value)
+  }
+
+  const handleExcerptChange = e => {
+    setExcerpt(e.currentTarget.value)
+  }
+
+	const handleAuthorChange = e => {
+    setAuthor(e.currentTarget.value)
+  }
+
+  return (
+    <div className='backend'>
+      <form onSubmit={handleSubmit} >
+        <input placeholder='Poem title' onChange={handleTitleChange} />
+        <input placeholder='Excerpt' onChange={handleExcerptChange} />
+				<input placeholder='Poem author' onChange={handleAuthorChange} />
+
+        <button type='submit'>Send</button>
+      </form>
+    </div>
+  )
+}
+
+export default Form