Create A Search Bar In React

Learn React with a simple emoji Dictionary App

Photo by Christin Hume on Unsplash

We know how to take input in vanilla JS and on change add event listeners and a submit button to take the input value and process the output.

In this article, we will learn how to do the same in React and also create a fun app in the process.

About the App

We will be creating an Emoji Dictionary App where the user can type the emoji in the input box and the meaning of the emoji will be shown in the output. If the emoji is not found we display it as “Emoji Not found”.

Step 1: Create React App

Install the React template app using the following command in the command line, which will create a starter react app with all react dependencies.

npx create-react-app emoji-app

Step 2: Create the Dictionary

We are not creating a database to store our data for this simple app. We will be storing it in a JS Object with key-value pair where the key is emoji and value is the emoji meaning

const emojiDictionary = {
  "😊": "Smiling",
  "😳": "disbelief",
  "😔": "sad",
  "🥡": "takeout box",
  "❤️": "love",
  "😑": "annoyance",
  "✔": "correct",
  "👏": "clap",
  "🙌": "high five",
  "😎": "cool"
};

Step 3: Set State using React Hooks

We use the useState function from React to create a state for our application.

We need two elements in the state — emoji and meaning

The emoji will store the user input and meaning will contain the emoji meaning which will be displayed as output

const [emoji, setEmoji] = useState("");
const [meaning, setMeaning] = useState("");

Step 4: Take Input from User

The input tag will have an onChange Event which gets trigger whenever a change is made to the input bar

<input
        onChange={changeHandler}
        value={emoji}
        placeholder={"Search your emoji"}
        className="input-element"
 />

Step 5: onChange Handler and Display Output

Create an onChange handler function that takes the input value and sets meaning and displays output.

function changeHandler(event) {
    const inputEmoji = event.target.value;
    setEmoji(inputEmoji);
if (inputEmoji in emojiDictionary) {
      setMeaning(emojiDictionary[inputEmoji]);
    } else {
      setMeaning("Emoji not found");
    }
  }

The setMeaning hook rerenders the component and Meaning is displayed as output. The full App code is shown below for your reference.

import './App.css';
import React, { useState } from "react";
const emojiDictionary = {
  "😊": "Smiling",
  "😳": "disbelief",
  "😔": "sad",
  "🥡": "takeout box",
  "❤️": "love",
  "😑": "annoyance",
  "✔": "correct",
  "👏": "clap",
  "🙌": "high five",
  "😎": "cool"
};
const emojis = Object.keys(emojiDictionary);
function App() {
  const [emoji, setEmoji] = useState("");
  const [meaning, setMeaning] = useState("");
function changeHandler(event) {
    const inputEmoji = event.target.value;
    setEmoji(inputEmoji);
if (inputEmoji in emojiDictionary) {
      setMeaning(emojiDictionary[inputEmoji]);
    } else {
      setMeaning("Emoji not found");
    }
  }
function emojiClickHandler(inputEmoji) {
    setMeaning(emojiDictionary[inputEmoji]);
  }
return (
    <div className="App">
      <h1>Emoji Detector</h1>
      <input
        onChange={changeHandler}
        value={emoji}
        placeholder={"Search your emoji"}
        className="input-element"
      />
      <h2> {emoji} </h2>
      <h3> {meaning} </h3>
      {
        emojis.map((emoji) => (
          <span
            onClick={() => emojiClickHandler(emoji)}
            className="emoji"
          >
            {emoji}
          </span>
        ))
      }
    </div>
  );
}
export default App;

With this now you are able to create a simple input handling app that takes input from users and displays output.

Thank You for reading till the end and I hope this article was helpful. Do follow me for more such articles!

References

More content at plainenglish.io