Using emoji-picker package in Reactjs

Question

I'm trying to implement an emoji picker for an input box. It's my first time with it and I'm having a problem while using. I could't give the user the ability to type more than one emoji. The emoji selected before always substitutes the previous one. can someone help me with that? for now I decided to test it in a sandbox, but if I'm able to pull it out, I'll use it in a project. Here's the code:

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

const App = () => {

  const [emoji, setEmoji] = useState([])

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


  return (
    <div>
      <Picker onEmojiClick={onEmojiClick} skinTone={SKIN_TONE_MEDIUM_DARK} />

      <input
        type="text"
        id="input"
        onChange={e => setEmoji([...emoji, e.target.value])}
        value={emoji.emoji}
      />

    </div>
  );
};

export default App;

Answer 1

that's because you are overwriting the state of emojis. maybe you could store them in an array and do this:

setUseEmoji([...useEmoji, newEmoji])

then map over them when you want to display them

useEmoji.map((emoji) => <div> {emoji} </div>)

Answer 2

set this to be an array from the start

from: const [emoji, setEmoji] = useState({})

to: const [emoji, setEmoji] = useState([])

then set it like this: setEmoji([...emoji, e.target.value])

then iterate over it like so:

emoji.map((emj) => <div> {emj} </div>) or if it's an object:

emoji.map((emj) => <div> {emj.propertyValue} </div>)