added autocomplete

src/pages/home/components/Form.js

 import React, { useState } from 'react'
-import axios from "axios"
 
 import SearchBar from "./SearchBar"
 import NextButton from "./NextButton"
-import SelectedItems from "./SelectedItems"
 
 function Form() {
 
-    const [showSelectedItems, setShowSelectedItems] = useState(false)
     const [selectedItems, setSelectedItems] = useState([])
-    const [error, setError] = useState("")
-    
-    const handleSubmit = (event, search) => {
-        event.preventDefault()
-        let base_url = "https://api.spoonacular.com/food/ingredients/search"
-        const params = new URLSearchParams({
-            apiKey: "4ce04e457c8348cfaec8ee0c7100b2f8",
-            query: search,
-            number: 1
-        })
-        let url = base_url + "?" + params.toString()
-        axios({
-            url: url,
-            method: "get",
-            headers: {
-                "Content-Type": "application/json"
-            }
-        })
-        .catch(err => {
-            if (err.toJSON().status === 402) {
-                setError("Max API requests reached.")
-            }
-            throw err;
-        }
-        )
-        .then(response => response.data)
-        .then(response => setSelectedItems(oldResponses => [...oldResponses, response.results[0]]))
-        .then(setShowSelectedItems(true))
-        
-    }
-    
-    let selectedItemsComponent = showSelectedItems ? <SelectedItems data={selectedItems}/> : null
 
+    const handleSubmit = (items) => setSelectedItems(items)
     return (
         <div>
             <SearchBar
                 submit={handleSubmit}
             />
-            {error !== "" ?
-            <h3>{error}</h3> :
-            selectedItemsComponent}
             <NextButton items={selectedItems}/>
         </div>
     )

src/pages/home/components/SearchBar.js

 import React, { useState } from 'react'
 import TextField from '@mui/material/TextField';
+import { Stack } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
 
 
 function SearchBar(props) {
 
-    const [searchValue, setSearchValue] = useState("")
+    const [suggestions, setSuggestions] = useState([])
 
     const handleChange = (event) => {
-        setSearchValue(event.target.value)
+        var axios = require("axios").default;
+
+        var options = {
+            method: 'GET',
+            url: 'https://spoonacular-recipe-food-nutrition-v1.p.rapidapi.com/food/ingredients/autocomplete',
+            params: { query: event.target.value, number: '3', metaInformation: 'false' },
+            headers: {
+                'x-rapidapi-host': 'spoonacular-recipe-food-nutrition-v1.p.rapidapi.com',
+                'x-rapidapi-key': '9488865383msh30a38be9ec16e99p109d9bjsn9090d29ce12f'
+            }
+        };
+
+        axios.request(options).then(function (response) {
+            setSuggestions(response.data.map(result => result.name))
+        }).catch(function (error) {
+            console.error(error);
+        });
+
     }
 
-    const handleSubmit = (event) => {
+
+    const handleSubmit = (event, value) => {
         event.preventDefault()
-        props.submit(event, searchValue)
-        setSearchValue("")
+        props.submit(value)
     }
 
     return (
 
         <form onSubmit={handleSubmit}>
+            <Stack spacing={2} sx={{ width: 400 }}>
+                <Autocomplete
+                    onChange={handleSubmit}
+                    filterOptions={(x) => x}
+                    multiple
+                    autoHighlight
+                    options={suggestions}
+                    renderInput={(params) => {
+                        return (
                             <TextField
+                                {...params}
                                 className="searchBar"
-                value = {searchValue}
                                 onChange={handleChange}
                                 label="Search Recipe's"
                                 sx={{
                                     marginLeft: 10
                                 }}
                             />
+                        )
+                    }}
+                >
+                </Autocomplete>
+            </Stack>
         </form>
     )
 }

src/pages/home/components/SelectedItems.js

-import { List, ListItem, ListItemText, Typography } from '@mui/material';
-import React from 'react'
-
-function SelectedItems(props) {
-
-    let items;
-    if (JSON.stringify(props.data) !== '[]') {
-        items = <List>
-            {props.data.map(ingredient =>
-                <ListItem key={ingredient.id}>
-                    <ListItemText
-                        primary={ingredient.name}
-                    />
-                </ListItem>
-            )
-            }
-        </List>
-    } else {
-        items = <List>
-            <ListItem>
-                <ListItemText
-                    primary="Searching..."
-                />
-            </ListItem>
-        </List>
-    }
-    return (
-        <div>
-            <Typography variant="h4" sx={{ mt: 4 }}>Selected Items</Typography>
-            {items}
-        </div>
-    )
-}
-
-export default SelectedItems

src/pages/results/Results.js

@@ -10,7 +10,7 @@ function Results() {
 
     useEffect(() => {
         let ingredientNames = ""
-        location.state.items.forEach(ingredient => ingredientNames += ingredient.name + ",");
+        location.state.items.forEach(ingredient => ingredientNames += ingredient + ",");
         ingredientNames = ingredientNames.slice(0, -1); // remove the last comma
 
         const params = new URLSearchParams({
@@ -36,7 +36,7 @@ function Results() {
     }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
     const recipeComponent = recipes.map(recipe =>
-    <Link to={"/recipe/" + recipe.id}>
+    <Link to={"/recipe/" + recipe.id} key={recipe.id}>
     <Typography
         variant="h5"
         key={recipe.id}