Making of Emoji Cyclopedia :

Emoji Cyclopedia is an encyclopedia to take out the meaning of an emoji. We have to insert emoji in the input column or we can click on the emoji given from the database. We can add as much as emoji's in our database using the dictionary used. It is made up of using ReactJs

Let's get started building the application. First of all, we need to import React and component useState from react. Importing means reusing the methods, components declared earlier. To display on the screen we have to right things in return().

As a display, we need to take input using input tag, and to represent the output we are creating the dictionary and function.

Dictionary: It is a key and value pair represented by curly braces({}). Can be accessed using a for loop with a key to finding the value. Here we are storing our emoji and its value using the dictionary itself.

Object.keys(): It is a method that returns an array of the provided object's elements which are strings corresponding to the enumerable properties found directly upon the object. Ordering remains the same as inserted.

We need to access our created dictionary of emojis with the help of Object.keys()method.

Hook in react: A hook is a special function that lets you "hook into" react features. useState is a hook that lets you add React state function components.

Now we need to import the useState hook from React to use react capabilities or functions.

Here we need to create functions as clickHandler and emojiInputHandler.

function clickHandler needs an emoji as a parameter. Here, we are finding the meaning of the emoji and passing it to setState.

Function emojiInputHandler takes the event as a parameter and as per the event meaning is searched for the event(i.e, Event is here inserted emoji) and comparing if there is emoji is present in the dictionary if not it will result as "Undefined". If it is their then meaning is the output.

We have created the constraint and now we need to access them properly. To take the event as input we need to add an event handler in the input tag. as,

Here We have created our Emoji cyclopedia. We can show our stored emoji's and as the user clicks on them it should show the meaning.

map(): The map method creates a new array with the called object.

As we know we have used the Object.keys method to create an array using a dictionary and this array is used with the map function here.

Emoji Cyclopedia is completed!