import * as React from "react"; import { useState } from "react"; import { Link } from "react-router-dom"; const content = [ { link: "/review/elden-ring", name: "Elden\nRing" }, { link: "/review/title-1", name: "defg" }, { link: "/review/title-2", name: "ghij" }, { link: "/review/title-3", name: "jklm" } ]; export default function Search(props) { //For storing and setting search input const [query, setQuery] = useState(""); const handleOnSubmit = (event) => { event.preventDefault(); props.history.push({ pathname: "/results", state: query }); }; return ( //Search input

{/* Search Suggestions */}

{/* Query must have length to prevent mapping by default */} {query.length > 0 && content .filter((content) => { //If input return object if (query == "") { return content; } //If any input characters much object characters return corresponding object else if ( content.name.toLowerCase().includes(query.toLocaleLowerCase()) ) { return content; } }) //Maps element based on the number of json objects .map((content, index) => { return (

setQuery(() => "")} >

{content.name}

); })} ;

); }

nifty-payne-2oqd4h