Autocomplete Input in React

<h2>Overview</h2> <p>This is the first lab in the series of cool React mini apps/components that we are going to build together. I have tried to keep it simple and at the same time informative enough so that you folks actually learn about how to create a custom autocomplete input box in React.</p> <p><img src="https://json.commudle.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbGNWIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--a4b11a33c8ccc76f4a293183a21bbe8271383987/ezgif.com-gif-maker.gif" alt="" width="425" height="519" /></p> <h2>Features of the component</h2> <ol> <li>There is an input box with placeholder</li> <li>On focussing on the input, a list of pokemons with their name and image appear in the div below.</li> <li>You can type something in the input and the list will get filtered accordingly</li> <li>On selecting an item in the list, the list disappears with the name of the pokemon in the input.</li> <li>Nice to have features: <ol> <li>If the list of pokemons is visible, clicking on the input or any where in the page, the list should disappear and should reappear again when focussing on the input</li> </ol> </li> </ol> <p>&nbsp;</p> <h2>Learning Objectives</h2> <p>In this lab, you will learn about different React concepts like <code class="gatsby-code-text">hooks</code>, creating a function component, data fetching in React, usage of array functions like <code class="gatsby-code-text">map</code>, <code class="gatsby-code-text">fill</code>, <code class="gatsby-code-text">filter</code>, etc.</p> <p>&nbsp;</p> <h2>To get the most out of this series:</h2> <p>You need to be at least acquainted with basic JS and React concepts. You will be able to understand everything if you have given atleast a day to learn React.</p> <p>&nbsp;</p> <h2>Code/Environment Setup:</h2> <p>Preferred Code Editor: VS Code,</p> <p>Node version &gt;= 12.0.0</p> <p>Create a react project boilerplate using the <code class="gatsby-code-text">create-react-app</code> CLI or if you have <code class="gatsby-code-text">npx</code> installed on your system you can directly do&nbsp;<code class="gatsby-code-text">npx create-react-app</code></p> <p>To get npx on your system, run</p> <pre class="language-markup"><code>npm install -g npx</code></pre> <pre class="language-markup"><code>npx create-react-app custom-autocomplete-react cd custom-autocomplete-react yarn start or npm start</code></pre> <p>and there you go!</p> <p>You have your react project ready to be consumed and altered into something meaningful.</p>