From 8439ec4c7761205a79c202ea2aff990423ce0864 Mon Sep 17 00:00:00 2001
From: SandraBergstrom <bergstrom_sandra@hotmail.com>
Date: Fri, 30 Jun 2023 08:25:58 +0000
Subject: [PATCH] #36 Add form and state  to location component

---
 src/components/LocationForm.js | 44 ++++++++++++++++++++--------------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/LocationForm.js b/src/components/LocationForm.js
index 9f0f8fa..d3ebfa2 100644
--- a/src/components/LocationForm.js
+++ b/src/components/LocationForm.js
@@ -1,23 +1,31 @@
-import React from 'react';
-import axios from 'axios';
+import React, { useState } from "react";
+import axios from "axios";
+import { Form } from "react-bootstrap";
 
 const LocationForm = () => {
-
-}
+  const [locationName, setLocationName] = useState("");
+  const [countries, setCountries] = useState([]);
+  const [selectedCountry, setSelectedCountry] = useState("");
+};
 
 return (
-    <form>
-        <div>
-            <label>Name of location:</label>
-            <input />
-        </div>
-        <div>
-            <label>Country:</label>
-            <select>
-                
-            </select>
-        </div>
-    </form>
-)
+  <form onSubmit={handleSubmit}>
+    <Form.Group>
+      <Form.Label htmlFor="locationName">Name of location:</Form.Label>
+      <input
+        type="text"
+        name="name"
+        value={location}
+        onChange={handleLocationChange}
+      />
+    </Form.Group>
+    <Form.Group>
+      <Form.Label htmlFor="country">Country:</Form.Label>
+      <Form.Control as="select" onChange={handleCountryChange}>
+      <option key={country.name} value={country.name}></option>
+      </Form.Control>
+    </Form.Group>
+  </form>
+);
 
-export default LocationForm;
\ No newline at end of file
+export default LocationForm;