Upload New File

bloglist_frontend/src/components/BlogForm.js

+import { useState } from 'react' 
+
+const BlogForm = ( {createBlog } ) => {
+  const [title, setNewBlog] = useState('')
+  const [author, setNewAuthor] = useState('')
+  const [url, setNewUrl] = useState('')
+
+  const handleBlogAdd = (event) => {
+    setNewBlog(event.target.value)
+  }
+  const handleAuthorAdd = (event) => {
+    setNewAuthor(event.target.value)
+  }
+  const handleUrlAdd = (event) => {
+    setNewUrl(event.target.value)
+  }
+
+  const addBlog = (event) => {
+      event.preventDefault()
+      createBlog({
+        title: title,
+        author: author,
+        url: url,
+        likes: 0,
+      })
+      setNewBlog('')
+      setNewAuthor('')
+      setNewUrl('')
+  }
+    
+    return (
+      <div>
+        <h2>create new</h2>
+        <form onSubmit={addBlog}>
+          title:
+              <input
+              value={title}
+              onChange={handleBlogAdd}
+              placeholder='write title here'
+            />
+        <br></br>
+         author:
+              <input
+              value={author}
+              onChange={handleAuthorAdd}
+              placeholder='write author here'
+            />
+        <br></br>
+          url:
+              <input
+              value={url}
+              onChange={handleUrlAdd}
+              placeholder='write url here'
+            />
+        <br></br>
+        <button type="submit">create</button>
+      </form>  
+      </div>
+    )
+}
+export default BlogForm
\ No newline at end of file