How to Create Emoji-Picker React JS | React JS Projects2 min read

Hey React Developers, In this Post we will be Creating a Emoji-Picker Using React JS, This is a Good For React Beginner to Practise & Master React JS. So Let’s Start With our Today’s Emoji-Picker Project But, Before Moving On If you Have Not Accessed React JS Interview Questions (with SOLUTION) Check it Out.

Create a New React App

npx create-react-app emoji-picker

Module Installation

Install the Emoji Picker React Module:

npm i emoji-picker-react

Folder Structure of the App

You Might Also Like: React vs Angular | Which One You Should Go For?

In the Folder go to App.js File & Copy-Paste the Following Code, Make Sure You Have Installed the React Module Mentioned Above.

import React from 'react'
import Emoji from './components/Emoji'

  function App() {
  
    return (
      <>
        <Emoji/>
      </>
    );  
  }

export default App;   

Now the Next Step is After you have Added the Code, Then as you can see we have imported Emoji From a Component Which we have created. So Make Sure to Make a Folder Called Components>>Emoji.js And Paste the Following Code:

import React, { useState } from 'react';
import Picker from 'emoji-picker-react';

export default function Emoji(){
const [chosenEmoji, setChosenEmoji] = useState(null);

const onEmojiClick = (event, emojiObject) => {
	setChosenEmoji(emojiObject);
};

return (
	<div>
	<h3>Emoji Picker</h3>
	{chosenEmoji ? (
		<span>Your Emoji: {chosenEmoji.emoji}</span>
	) : (
		<span>No Emoji</span>
	)}
	<Picker onEmojiClick={onEmojiClick} />
	</div>
);
};

So Here is How Our Emoji Picker App will be Looking Like This:

So this was it for this Blog See you In the Next One Till then Keep Coding Keep Exploring!

You Might Also Like: React vs React Native | What is the Difference?

• Author
• Recent Posts

Tanmay Sinha

Founder & CEO at Mr Programmer

Founder & CEO of MrProgrammer.in | I help Learning Freaks to Step into the World of Programming and Our Mission is to Provide High Quality and Valuable Content to Our Users!

We believe that everyone has the potential to learn to code, and we are committed to making that happen. Our courses are designed to be engaging and interactive, and we offer a variety of learning paths to meet the needs of all learners.

We are also committed to providing our learners with the support they need to succeed, and we offer a variety of resources to help learners learn at their own pace.

If you are interested in learning to code, we encourage you to check out our courses. We are confident that you will find our content to be high-quality, valuable, and makes sense.

Latest posts by Tanmay Sinha (see all)

• The JS Developer’s Podcast [EP: 2] Variables and Data Manipulation - October 15, 2024
• YouTube Channels to Learn Coding: Top 9 Picks That Will Make a You Master - October 10, 2024
• The JS Developer’s Podcast [EP: 1] Introduction to JavaScript - September 27, 2024