Forem: L Javier Tovar

How to hide your API keys and tokens in React to protect your application

L Javier Tovar — Tue, 17 Jan 2023 15:23:43 +0000

Using environment variables in Reactjs with Vite and nodejs

Have you ever noticed that some applications have API keys, tokens, or other sensitive credentials visible in their source code? or maybe your own applications?

Well, this can be dangerous and put the security of your services at risk.

API keys, tokens, and other sensitive credentials are used to authenticate and authorize access to services and APIs. If this data is exposed in your application’s source code, anyone who can see your code can access it and use it to perform unauthorized actions on your behalf.

Moreover, by exposing your credentials, you are allowing third parties to use them, which can affect the performance or quality of your services, or even perform attacks against them.

This tutorial will show us how to hide your API keys, tokens, and other sensitive credentials.

How to hide sensitive data?

Some of the ways to do this are:

Use environment variables
Use a proxy server or a backend platform as a service (BaaS)
Use a secure hosting platform

In this way, you can protect the security of your services and prevent them from being compromised.

Now, we will see how to hide sensitive credentials by building a small backend for our React application.

Using Environment Variables in React with Vite

In this tutorial, we will add an OpenWeather APY KEY as an environment variable.
Specifically, we will use the weather API, which is a service that provides weather data, and after a certain number of requests, it starts charging for the requests, so we don’t want this API KEY to be available to the public.

To configure the environment variables in React with Vite we can follow the following steps:

1 — Create your React application with Vite. I will use TypeScript but you can use JavaScript if you wish.

2 — Create a .env file at the root of your project. This file should contain the environment variables you want to use in your application.

API_KEY=784dc6d4eXXXXXXXXb14460d3a356565
PORT=3001

Once we create our .env file we must not forget to attach it to the .gitignore file of git, otherwise, our API KEY will be exposed in the repository.

3— In Vite, to access the environment variables we need to access them via import.meta.env. This returns an object containing the available environment variables known to Vite.

The variables created must have the prefix VITE_ or could be another prefix overwriting the default configuration option envPrefix.

const API_KEY = import.meta.env.VITE_API_KEY

4 — Now we will create a simple application that will fetch the Weather API to retrieve the temperature of a city.

import { useEffect, useState } from "react"
import { ResponseWeather } from "../types"

const API_KEY = import.meta.env.VITE_API_KEY

import "./App.css"

function App() {
 const [weather, setWeather] = useState<ResponseWeather | null>(null)

 useEffect(() => {
   const options = {
     method: "GET",
     url: `https://api.openweathermap.org/data/2.5/weather?lat=43.7001&lon=-79.4163&appid=${API_KEY}`)
     headers: {
      "Content-Type": "application/json",
     },
  }

  axios.request(options).then(response => {
   setWeather(response.data)
  })

 }, [])

 if (!weather) return null

 return (
  <div className='App'>
   <h1>{weather?.name}</h1>
   <h2>{Math.floor(weather?.main.temp - 273.15)} °C</h2>
   <i>
     <img
       src={`http://openweathermap.org/img/wn/${weather?.weather[0].icon}@2x.png`}
       alt={weather?.weather[0].description}
      />
   </i>
   <p>{weather?.weather[0].main}</p>
  </div>
 )
}

export default App

Now that we have hidden our API KEY with an environment variable and made sure that the .env file is not uploaded to the repository we have done half the work.

And why do we say this? Because our API KEY is still exposed in the final build, if we inspect our app in the browser we will find the value of the API KEY, so the only way to have this value completely hidden is to have it on the server side creating a backend service.

This backend will be in charge of making requests to the Openweather service and our client, that is, our React application will query this backend.

pnpm express cors dotenv axios

In this case that we use Typescript, we will need in addition

pnpm ts-node @types/express @types/cors @types/dotenv @types/node

express to create a server
cors to enable resource sharing between different domains.
dotenv to load environment variables.
axios to fetch data.

2 — We create a file called api.ts at the root of the project. We also take the opportunity to add a new command to package.json to boost our server.

"scripts": {
  "server": "npx ts-node api.ts",
  ...
}

3 — We create the server and make available the endpoint that we will use from React.

import express from "express"
import { Request, Response } from "express"
import * as dotenv from "dotenv"
import cors from "cors"
import axios from "axios"

dotenv.config()

const app = express()

app.use(cors())

app.get("/api/weather", (req: Request, res: Response) => {
 const options = {
  method: "GET",
  url: `https://api.openweathermap.org/data/2.5/weather?lat=43.7001&lon=-79.4163&appid=${process.env.VITE_API_KEY}`,
  headers: {
   "Content-Type": "application/json",
  },
 }

 axios
  .request(options)
  .then(response => {
   res.json(response.data)
  })
  .catch(err => {
   console.log(err)
  })
})

app.listen(process.env.VITE_PORT, () => console.log(`Server on port ${process.env.VITE_PORT || 3001}`))

Now that we have the backend service, our API KEY is completely hidden from the client. We could add more layers of security as we want for example, in the cors add only the domain where our app is hosted and only that domain can make requests.

4 — We start our server with the following command

pnpm run server

Finally, we just need to replace the URL of the request we make in React with the one we have in the backend. We no longer need to retrieve the API KEY in React.

// Before
url: `https://api.openweathermap.org/data/2.5/weather?lat=43.7001&lon=-79.4163&appid=${API_KEY}`)

// After
 url: "http://localhost:3001/api/weather"

And that’s it! our application continues to work as usual only that we no longer have our API KEY exposed on the client side.

Repo here.

Conclusion

In conclusion, hiding sensitive data is something relatively easy, just follow the steps mentioned above and with that, we can avoid major risks and complications.

I hope this will help you to keep your projects safe.

Read more:

Want to Connect?
Love connecting with friends all around the world on Twitter.

How to create reusable and customizable modals with React and TypeScript

L Javier Tovar — Sun, 18 Dec 2022 02:14:58 +0000

As a frontend developer, you have probably had to build a modal window on more than one occasion. This type of element differs from the typical pop-ups because it does not appear automatically, but it is the user who has to click somewhere on the website (usually a button) to make it appear.

In this tutorial, you will learn how to develop and implement a modal component in your React project with TypeScript. It will be reusable in any part of your application, and you will be able to customize it and add any type of content.

What Are Modal Windows?

Modals are undoubtedly one of the most used components on the web because they can be used in different contexts, from messages to user input. They have placed an overlay on the screen. Therefore, they have visual precedence over all other elements.

Like many other components in React, a dependency can be installed to help in this process. However, we always end up limited in several aspects, and one of them is styling.

We can create a modal inside or outside the element we call it from in the DOM hierarchy, but to fulfill the definition of a modal, it should be at the same level as the element used as root in React, and to achieve this, we will use the Portals.

What Are Portals in React?

Portals provide a quick and easy way to render children to a DOM node that exists outside the DOM hierarchy of the parent component.

In React, the default behavior is to render the entire application under a single DOM node — the root of the application, but what if we want to render children outside the root DOM node? And you want children to appear visually on top of its container.

A Portal can be created using ReactDOM.createPortal(child, container). Here the child is a React element, fragment, or string, and the container is the DOM location (node) to which the portal should be injected.

Below is an example of a modal component created using the above API.

Although a Portal is rendered outside the parent DOM element, it behaves similarly to a normal React component within the application. It can access props and the context API.

This is because the Portals reside within the React Tree hierarchy, and Portals only affect the HTML DOM structure and do not impact the React component tree.

Developing Modals in React

Setting up
We create our application with vite with the following command:

yarn create vite my-modals-app --template react-ts

We install the dependencies that we will need in the project:

yarn add styled-components @types/styled-components

After that, we create the following structure for the project:

src/
├── components/
│   ├── layout/
│   │   ├── Header.tsx
│   │   └── styles.tsx
│   ├── modals/
│   │   ├── Buttons.tsx
│   │   ├── Modal.tsx
│   │   ├── PortalModal.tsx
│   │   ├── index.ts
│   └── └── styles.ts
├── hooks/
│   └── useOnClickOutside.tsx
├── styles/
│   ├── modal.css
│   ├── normalize.css
│   └── theme.ts
├── ts/
│   ├── interfaces/
│   │   └── modal.interface.ts
│   ├── types/
│   └── └── styled.d.ts
├── App.tsx
├── main.tsx
└── config-dummy.ts

Components

As we can see in the folder structure, we have several functional and styling components for this app, but in order not to make this tutorial long, we will focus only on the main components.

App.tsx: In this component, we have examples of how to use our custom modal. We have buttons that show modals with different configurations to give us an idea of what we can achieve with this modal.

In this component, we also define the theme for our modal, adding a ThemeProvider and creating a global style with createGlobalStyle of styled-components.

Modal.tsx: This component is conditioned to be displayed or not depending on the action performed by the user. It is wrapped in a style component that is superimposed on the screen.

This component receives as property the configuration that is where we will define how our modal will be seen, that is to say, the position where it will be shown, the title of the modal, paddings, etc.

It also receives children, which contains all the content that will be shown inside the modal. It can be any type of tsx content.

Also, in this component, we have a couple of functionalities, which serve us to close the modal.

useOnClickOutside: This is a custom hook that will close the modal when it detects that the user clicks outside the modal.

This hook receives as a parameter the reference of the element that we want to detect and a callback that is the action that we want to make when detecting a click.

This hook adds an EventListener that will respond to the mousedown and touchstartevent, after this, it will evaluate if the click was inside the element or outside of it.

handleKeyPress: This is a callback that will be executed when it detects that the user presses the ESC key to close the modal.

It does this by adding an EventListener to the keydownevent to then evaluate which key was pressed.

PortalModal.tsx: This component uses the React Portals, which we have already mentioned previously.

It receives children that would be our modal and an id that we will use to assign it to an HTML element.

In this component, we use the hook useLayoutEffect. This hook is a little different from useEffect since this one is executed when it detects a change in the virtual DOM and not in the state, which is exactly what we are doing when creating a new element in the DOM.

Inside the useLayoutEffect, we look for and validate if the element has already been created with the id that we have passed, and we set this element. Otherwise, we make a new element in the DOM with the function createWrapperAndAppenToBody.

With this function, we can create the element where it best suits us. In this case, it is being created at the same level as the root element within the body.

Once we have created the element where we are going to insert our modal, we create the portal with createPortal.

configDummy.ts: This is the file we will use as a template to generate different modals, in this case, 4.

As you can see, you can make a lot of combinations to generate a modal different from each other, and you could add more configurations if you wish.

That’s it! we have our cool Modals.

See the demo here.

Repo here.

Conclusion

In this tutorial, we have created a reusable component as we can use it anywhere in our application. Using React Portals, we can insert it anywhere in the DOM as it will create a new element with the id, we assign to it.

We also have different styling options for our modal, and we can add the ones we can think of, besides having implemented a dark mode that I particularly like.

I hope this tutorial has been useful for you and that you have learned new things in developing this application.

Read more:

Want to Connect?
Love connecting with friends all around the world on Twitter.

Improve User Experience with a Modern Skeleton Loader in React

L Javier Tovar — Sat, 26 Nov 2022 04:43:34 +0000

Create a Skeleton UI with React Loading Skeleton

We have all experienced that moment when we don’t know if the website we are accessing is doing something in the background or if it has simply crashed and left us waiting for a response.

That uncertainty of not knowing what is happening causes a terrible user experience, which today, we must pay close attention to as web developers.

Whenever we make a request to our back-end or some other external service, there is a time in which our application waits to receive the requested information. It is at this point that we must inform the user that something is happening.

To solve this problem, we will use Skeleton Loaders, which are a modern form of what have been the traditional Spinners and Loaders. Spinners and Loaders fulfill their function of informing users that content will take time to load, but for modern web development, they are becoming obsolete.

What are Skeleton Loaders?

A loading skeleton is a version of the user interface that does not include the actual content but instead mimics the page layout by displaying its elements similar to the actual content as it loads and becomes available.

A skeleton display is essentially a wireframe structure of the page, with placeholder boxes for text and images.

A skeleton UI resembles the actual UI of the page, so users will understand how quickly the web or mobile application will load even before the content is displayed.

Here are a couple of reasons why you might want to consider using skeleton screens in your next project:

Mimicking a page layout is easier with a skeleton screen,
Content loads progressively (not all at once).

Skeleton Loading is also known as:

skeleton screens
ghost elements
content placeholders
content loaders

There are different types of skeleton Screens and libraries that help us to implement them. In this tutorial, we will work with React Loading Skeleton.

React Skeleton Loading

Pros

It is API-based, and it has one component with props for all customization.
It can be used as a separate skeleton component and also inside any component directly, so it’s flexible.
It supports theming and Pulse animation.

Cons

It’s easy to implement for a simple Skeleton UI but complicated for more complex skeletons.
Having a separate skeleton component will make it harder to maintain when the UI and styles change.

Building a Skeleton Loader for an eCommerce Product Gallery page

In this tutorial, we will create a product gallery explaining the main properties offered by the library.

Here is what we will develop:

Let’s start by creating a new project with:

npx create-react-app my-app

The next thing is to install the libraries we will use. In this case, we will use styled-components for the styles, react-icons for the icons, axios for the data fetching, and of course, react-loading-skeleton.

react-loading-skeleton

After that, we create the following structure for the project:

src/
├── assets/
│   └── banner.jpg
├── components/
│   ├── Banner.js
│   ├── Gallery.js
│   └── Header.js
├── pages/
│   └── Plp.js
├── styles/
│   └── GlobalStyles.js
├── App.js
└── index.js

As you can see, it is a very simple project where the only components that interest us are Banner.js and Gallery.js, where we have implemented the Skeleton Loading.

The rest of the components are just to shape the project and simulate an e-commerce product page. I will leave the repository at the end of the post.

Now let’s start explaining what interests us about the project. First, we are going to add some dummy products to show them in our gallery. For this, we will use fakeStoreAPI, which is a free online REST API that you can use whenever you need.

axios.get('https://fakestoreapi.com/products/category/electronics/')
.then(({ data }) => {                
  setProducts(data)               
  setLoading(false)
})

With this endpoint, what we get is a JSON with dummy products from the electronics category and, we get a response like this:

[
  {
    "id": 9,
    "title": "WD 2TB Elements Portable External Hard Drive - USB 3.0 ",
    "price": 64,
    "description": "USB 3.0 and USB 2.0 ...",
    "image": "https://fakestoreapi.com/img/61IBBVJvSDL._AC_SY879_.jpg",
    "rating": {
      "rate": 3.3,
      "count": 203
    }
  },
  {
    "id": 10,
    "title": "SanDisk SSD PLUS 1TB Internal SSD - SATA III 6 Gb/s",
    "price": 109,
    "description": "Easy upgrade for ...",
    "category": "electronics",
    "image": "https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_.jpg",
    "rating": {
      "rate": 2.9,
      "count": 470
    }
  },
  ...
]

The next step is to misuse the data received from the API and create a product card for each item.

<GalleryStyles>            
  <h2 className='gallery__title'>Featured Products</h2>
  <div className='gallery__grid'>                
    {products &&                    
      products.map(product => {                        
        return (                            
          <section key={product.id}>
            <article className='item'>
              <div className='item-img'>
                <img src={product.image} alt=''/>
              </div>
              <h3 className='item-title'>{product.title}</h3>
              <div className='item-info'>
                <span>{product.category}</span>
                <div className='item-rating'>
                  <span>{product.rating.rate}</span>
                  <span className='item-start'>
                    <FaStar fill='yellow' /></span>
                </div>
              </div>
              <h3 className='item-price'>${product.price}</h3>
              <div className='item__btns'>
                <button className='item__btnadd'>
                  Add to card
                </button>
                <button className='item__btnbuy'>
                  Buy now
                </button>
              </div>                                
            </article>
          </section>
        )                    
      })                
    }            
  </div>        
</GalleryStyles>

Now that we have our gallery created, we move on to create the Skeleton Loading of each product card.

The first thing to do is import the library and the CSS styles.

import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'

As we saw previously, the Skeleton Loading is mainly based on making a layout as close as possible to the component we want to represent. So, we will copy as such the structure of the component that is inside the <Section> tag which is the product card we want to represent.

To keep the structure as similar as possible, we will try to respect all the HTML tags that we have used to layout the component as well as the classes. The magic of the Skeleton Loading consists of replacing the content of each element with its component <Skeleton/>.

<section>
  <article className='item'>
    <div className='item-img'>
      <Skeleton width={140} height={140} />
    </div>
      <h3 className='item-title'><Skeleton count={4} /></h3>
    <div className='item-info'>
      <Skeleton width={160} height={20} />
      <Skeleton width={30} height={20} />
      <Skeleton width={22} height={22} circle={true} />
    </div>
    <Skeleton height={48} count={2} className='skeleton' />
  </article>
</section>

While we can leave the default <Skeleton/> component without modifying any properties, it works correctly but we might notice that our Skeleton doesn’t look much like our final component, so we will use some of its properties to make it more similar.

Skeleton react loading provides us with several properties to style our Skeleton.

With width and height we add the width and height of the Skeleton in px.
With a circle we make a Skeleton a circular figure and this property is a boolean.
We also have a count which replicates n quantity of Skeletons or rows of Skeletons as we indicate it.
In the same way, we can change the speed of the animation that brings us by default that is 0.2, and we do it with the duration property.
In addition, the library offers us the option to change the colors of the Skeleton, we do it with its <SkeletonTheme> component where we can change the base color and the color of the animation.

<SkeletonTheme color='#F5F5F5' highlightColor='#ffffff'></SkeletonTheme>

There are more properties but in this tutorial, We only use the most used ones. Now we can see that our Skeleton already looks much more like our product sheet.

Finally, we have the problem that We don’t know how many elements the fetching will return to us at the data we use. Therefore, we do not know how many Skeletons we should paint.

That is solved if we have defined pagination in the gallery, then we already know that for each page, We will show n amount of elements.

If we do not have any pagination implemented, what we could do, is to define a specific number of skeletons we want to display or check how many elements are visible in the viewport to display the necessary skeletons.

See the demo here.

Repo here.

Conclusion

As we can see, it is not difficult to create Skeletons Loadings for our websites and add a great user experience.

However, there are points to consider when implementing Skeletons, for example, if we need a fast development, it is not a good idea to use them because they add another layer of logic to our components, besides if we are still in the development of the components these can change several times and, we will have to do the same with our Skeletons every time we modify the design of our component.

My recommendation would be to implement Skeleton Loading at the end of our project, when we have the final design of each component, or keep a simple Skeleton representing only the component container and at the end of the development give the final structure of our design to the Skeleton.

Undoubtedly, they are an excellent alternative to avoid seeing blank screens.

Read more:

Want to Connect?
Love connecting with friends all around the world on Twitter.

Why Should You Use Cleanup Functions in React’s useEffect Hook?

L Javier Tovar — Wed, 09 Nov 2022 03:17:22 +0000

Cleanup functions in React’s useEffect hook — explained with examples.

f you are starting to learn React or already have some time using this library, surely, you have come across some errors or warnings related to asynchronous functions, especially using the hook useEffect.

When I was learning the functionality of this hook, I could not understand the reason to use the return in this function since in most cases it is not necessary to use it and React works perfectly well without it.

As I became more familiar with the way React works and the life cycle of the components, I began to notice that in many cases, it is too important to use the return in the hook useEffect, especially in the side effects.

What are the side effects?

A side effect can be fetching data from a remote server, reading or writing to local storage, setting up event listeners, or setting up a subscription. These side effects can occur when a button is clicked, when a form is submitted, or when a component is mounted and unmounted.

React’s useEffect hook allows functional components to do things when a component is mounted or when some properties or states change. This hook also allows to clean up when the component is unmounted.

Why clean up side effects?
Handling side effects in React is a task of medium complexity. However, from time to time, you may have difficulties at the intersection of the component lifecycle (initial rendering, assembly, usage, disassembly) and the side-effect lifecycle (started, in progress, complete).

One such difficulty is when a side effect completes and attempts to update the state of an already disassembled component.

This causes a React warning like this:

Memory leaks in React applications are mainly the result of not canceling subscriptions made when a component was mounted before the component is unmounted.

They cause many problems, including:

Affects the performance of the project by reducing the amount of memory available.
Slowing down the application.
System crashes.

Therefore, it’s necessary to eliminate memory leak problems.

What is the useEffect cleanup function?
It is a function of the useEffect hook that allows us to stop side effects that no longer need to be executed before our component is unmounted.

useEffect is built in such a way that we can return a function inside it and this return function is where the cleanup happens.

For example, Component A requests the API to get a list of products, but while making that asynchronous request, Component A is removed from the DOM (it’s unmounted). There is no need to complete that asynchronous request.

So as a cleanup method to improve your application, you can clean up (cancel) the asynchronous request so that it’s not completed.

Cleanup function of useEffect:

useEffect(() => {
  // Your effect
  return () => {
    // Cleanup
  }
}, [input])

Cleaning up an effect

Canceling a fetch request

There are different ways to cancel fetch request calls, we can use fetch AbortControlleror Axios AbortController.

To use AbortController, we must create a controller using the AbortController() constructor. Then, when our fetch request initiates, we pass AbortSignal as an option inside the request’s options object.

This associates the controller and signal with the fetch request and lets us cancel it anytime using AbortController.abort():

Cleaning up Timeouts

When using setTimeout(callback, time) timer functions, we can clear them on unmount by using the special clearTimeout(timerId) function.

Cleaning up Intervals

Like the Timeouts, the setIntervals(callback, time)have a special function to clean them up with clearInterval(intervalId) function.

Cleaning up Event Listeners

Clean up Listeners happens via window.removeEventListener. The removeEventListener call must reference the same function in the removeEventListenercall to remove the listener correctly.

Cleaning up Web Sockets

When you create a WebSocket connection, you can close it in the cleanup socket.close() function.

Conclusion

We have learned that some side effects require cleanup to avoid memory leaks and unnecessary and unwanted behaviors. We must learn when and how to use the cleanup function of the useEffecthook to avoid these problems and optimize applications.

I recommend cleaning up asynchronous effects when the component is unmounted. Also, if the asynchronous side effect depends on the prop or state values then consider also cleaning them up when the component is updated.

I hope you found this article useful and that you can now use the cleanup feature correctly.

Read more:

Want to Connect?
Love connecting with friends all around the world on Twitter.

How to build an autocomplete search component in React and TypeScript

L Javier Tovar — Sun, 06 Nov 2022 23:18:50 +0000

How to show suggestions of data from an API Rest

Nowadays, one of the most widely used components of a website is the search engines with autocomplete or suggestions.

It is usually the first component with which the user interacts since it is more practical to perform a search and go directly to what we need. These components are essential in sites such as e-commerce for a good user experience.

In this tutorial, we will build a simple search component that offers users suggestions about what they are typing without third-party libraries.

What is Autocomplete Search?

Autocomplete is a pattern used to display query suggestions.

An autocomplete search, also called “predictive search” or “autosuggest,” is a component that the user types in the input field that will suggest various predictions or possible results of how the search might be completed.

Autocomplete works with a search engine that learns and improves the suggested results as it is fed by the searches its users perform.

In this case, we will not see more about search engines because it is out of the scope of the tutorial. If you want to learn more about this topic, you can look at this site. Without further ado, let’s get to programming.

Setting Up Autocomplete search

We create our application with vite with the following command:

yarn create vite autocomplete-search --template react-ts

We install the dependencies that we will need in the project:

yarn add @nextui-org/react

In this case, I am only going to use a third-party library for the styles you can use whatever you want:

nextui a Javascript/CSS framework

After that, we create the following folder structure for the project:

src/
├── components/
│   └── ui/
│       ├── Autocomplete.tsx
│       ├── Autocomplete.tsx
│       ├── index.ts
│       └── ui.module.css
├── hooks/
│   └── useAutocomplete.ts
├── ts/
│   └──interfaces/
│      └── Country.interface.ts
├── App.tsx
└── main.tsx

Components

AutocompleteWrapper.tsx This component is only used as a container or wrapper of Autocomplete.tsx and is where we are going to request the data we need.

We use the restcountries API for the tutorial and only use English-speaking countries so that the query will be as follows:

https://restcountries.com/v3.1/lang/eng

Autocomplete.tsx This is the main component, and it has two sections. The first section is the input element, and the second is the list of suggestions.

Usually, a <ul> or <ol> element is used, but in this tutorial, we will use Rows components inside a Next UI Card component.

First, we create the types we need. The API returns us a large amount of data that we will not use, so simplifying the information and the types would look like this:

export type Country = {
  name: Name
  flags: Flags
}
type Name = {
  common: string
}
type Flags = {
  png: string
  svg: string
}

After that, we will create the following states:

searchedValue — Here, we will store the text user is typing.

suggestions — Here, we will store the suggestions that match what the user writes.

selectedSuggestion — Here, we will store the option selected by the user.

activeSuggestion — Here, we will store the index of the suggestions shown. We will use it to know which suggestion is selected by the keyboard.

Now, we need to create the functions that will react to the events of the input element and the results list.

handleChange() This function will be executed every time the user types something in the input element. We’ll validate if what is entered isn’t an empty value. Otherwise, we’ll set the states to their initial values.

If the value received in the input element isn’t empty, the function will be executed and display the suggestions that match the value entered.

handleClick() This function will be executed when the user selects a suggestion; we save the selected value and set the remaining states to their initial values.

handleKeyDown() This function will be executed when an event is detected on the keyboard, so you can browse through the suggestions and select one.

Finally, we add a useEffect to focus on the input element when the component is mounted.

That’s all! We already have an autocomplete search we can use in any project by passing the input reference and the data to filter.

As an additional step and good practice, we will take the functionality to a custom hook, and our component will be cleaner and more readable.

The app looks like this:

See the demo here

Repo here

Conclusion

We have created a simple search component by applying filters to the data received this search could get more and more complicated depending on the case. After capturing the selected value, you could add more functionality, such as displaying the details of the country selected.

I hope this tutorial has been useful for you and that you have learned new things in developing this application.

Read more:

Want to Connect?
Love connecting with friends all around the world on Twitter.