i was implementing the emoji picker for the chat application. so when a user types a message in the input and click the emoji picker and when selecting a particular emoji i want to show the selected emoji along with the message typed by the user. instead of this when a user clicks a emoji it is showing undefined and getting some errors in the console.

function ChatInput() {
    const [msg,setMsg] = useState('')
    const [showEmojiPicker,setShowEmojiPicker] = useState(false);

    const handleShowEmoji = () => {
        setShowEmojiPicker(!showEmojiPicker);
    }

    const handleEmojiClick = (event,emojiObject) => {
        console.log(emojiObject);
        let message = msg;
        message += emojiObject.emoji;
        setMsg(message);
    }

  return (
    <Container>
        <div className="button-container">
            <div className="emoji">
                <BsEmojiSmileFill onClick={handleShowEmoji}/>
                {showEmojiPicker && <Picker onEmojiClick={handleEmojiClick}/> }
            </div>
        </div>
        <form className='input-container'>
            <input type='text' placeHolder='type your message here' value={msg} onChange={(e) => setMsg(e.target.value)}/>
            <button className='submit'>
                <IoMdSend/>
            </button>
        </form>
    </Container>
    )
}

consoling the emojiObject in the console getting this below

PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

also getting 404 error

cdn.jsdelivr/npm/emoji-datasource-apple/img/apple/64/2695-fe0f.png:1          GET .png 404

my emoji-picker-react version is 4.3.0

i was implementing the emoji picker for the chat application. so when a user types a message in the input and click the emoji picker and when selecting a particular emoji i want to show the selected emoji along with the message typed by the user. instead of this when a user clicks a emoji it is showing undefined and getting some errors in the console.

function ChatInput() {
    const [msg,setMsg] = useState('')
    const [showEmojiPicker,setShowEmojiPicker] = useState(false);

    const handleShowEmoji = () => {
        setShowEmojiPicker(!showEmojiPicker);
    }

    const handleEmojiClick = (event,emojiObject) => {
        console.log(emojiObject);
        let message = msg;
        message += emojiObject.emoji;
        setMsg(message);
    }

  return (
    <Container>
        <div className="button-container">
            <div className="emoji">
                <BsEmojiSmileFill onClick={handleShowEmoji}/>
                {showEmojiPicker && <Picker onEmojiClick={handleEmojiClick}/> }
            </div>
        </div>
        <form className='input-container'>
            <input type='text' placeHolder='type your message here' value={msg} onChange={(e) => setMsg(e.target.value)}/>
            <button className='submit'>
                <IoMdSend/>
            </button>
        </form>
    </Container>
    )
}

consoling the emojiObject in the console getting this below

PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

also getting 404 error

cdn.jsdelivr/npm/emoji-datasource-apple/img/apple/64/2695-fe0f.png:1          GET https://cdn.jsdelivr/npm/emoji-datasource-apple/img/apple/64/2695-fe0f.png 404

my emoji-picker-react version is 4.3.0

• javascript
• reactjs
• emoji

5 Answers 5

The documentation says that onEmojiClick prop receives a "callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter."

Also, it is defined as below:

onEmojiClick: (emojiData: EmojiClickData, event: MouseEvent) => void

with the 1st argument being the emoji object and the 2nd argument being the event. In your handleEmojiClick you do the opposite order and that's why it returns undefined.

You could also do it like this:

<Picker onEmojiClick={(emojiObject)=> setMsg((prevMsg)=> prevMsg + emojiObject.emoji)}/> 

This way you don't need "handleEmojiClick" and also correctly use the function version of updating state that is based on previous state, instead of manually doing this

let message = msg; message += emojiObject.emoji; setMsg(message);

use this

const onEmojiClick = (event) => {
  console.log(event.emoji);
}

now is with event

after uninstalling current emoji-picker-react version 4.3.0 and installed previous version of [email protected] fixed my issue

Install [email protected] Version.. It will work.

const handleEmojiClick = (event) => {
    let message = msg;
    message += event.emoji;
    setMsg(message);
    console.log(message)
}

You don't need second argument you can access emoji with event.emoji. The error in the console will not do but the code works.