How to add an emoji button in react?-CodePudding

So I already did this basically 1 year ago but I forgot how to do it, and its not working now though. Here is the LINK basically I have a like a "smile emoji icon button" and then when I click it I will pass the emoji in my text but it giving me now an error undefined. In the link you can see that it has same thing here.

import './App.scss';
import React, { useState } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import Picker from 'emoji-picker-react';

function App() {



    const [chosenEmoji, setChosenEmoji] = useState(null);

    const onEmojiClick = (event, emojiObject) => {
      setChosenEmoji(emojiObject);
      console.log(emojiObject)
    };
  
    
    return (
      <div className="App">
        <header className="App-header">
          
        {/* {isLogin && user ? <LoginTrue/> : <LoginFalse/>} */}
        {chosenEmoji ? (
          <span>You chose: {chosenEmoji.emoji}</span>
        ) : (
          <span>No emoji Chosen</span>
        )}
        <Picker onEmojiClick={onEmojiClick} />
      
        </header>
      </div>
    );
}

export default App;

but the new update of emoji-picker-react did get different...Is anyone can give me an idea of it? or is there another source of importing emojis..I don't want to use Input-emoji-react its too ugly.

CodePudding user response：

You may find it helpful but the way I personally did it on my project were I also used emoji-picker-react and MaterialUI is through native materialUI emoji icon button like this:

<div className="chat_footer">
        {!emojiPicker ? (
          <InsertEmoticonIcon onClick={() => setEmojiPicker((prev) => !prev)} />
        ) : (
          <>
            <InsertEmoticonIcon
              onClick={() => setEmojiPicker((prev) => !prev)}
            />
            <EmojiPicker
              searchDisabled="true"
              previewConfig={{ showPreview: false }}
              emojiStyle="google"
              onEmojiClick={(e) => setInput((input) => input   e.emoji)}
              height={400}
              width="40%"
            />
          </>
        )}

As I said, InsertEmoticonIcon is a MaterialUI icon which I import

CodePudding user response：

Code sandbox link: This link may help: https://codesandbox.io/s/emoji-picker-react-4-forked-h846rd?file=/src/App.tsx

Onclick handler has to be Emoji and Event, not Event and then emoji