Our great sponsors
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
import "./styles.css"; import {useState} from 'react'; import axios from 'axios'; export default function App() { // state that controlled the input value const [query, setQuery] = useState("") // state that hold API data const [suggestion, setSuggestion] = useState([]) const getLocations = () =>{ axios.get(`https://rickandmortyapi.com/api/location/?name=${query}`) //only add the data with the list of locations to the suggestion array .then(data => setSuggestion(data.data?.results)) .catch((err) => { //handle error when user types location that doesn’t exist from API if (err.response && err.response.status === 404) { setSuggestion(null) console.clear() } }) } return ( {setQuery(e.target.value); getLocations()}} list='locations' /> { query.length > 0 && // required to avoid the dropdown list to display the locations fetched before suggestion?.map((el, index) => { //make sure to only display locations that matches query if(el.name.toLowerCase().includes(query)){ return } return ''; }) } Search ); }