Create A Search Bar In React
Learn React with a simple emoji Dictionary App
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