Emoji Selector is Broken

[Ryan0204]

iShot_2022-08-22_16.41.26.mp4

[EtienneLem]

Are there any errors in the console? Can you share the code you use to hide and display the picker?

[Ryan0204]

Uncaught (in promise) TypeError: can't access property "id", emojiId is undefined

To display and hide the picker code:

const [isEmojiOpen1, setIsEmojiOpen1] = useState(false);
const [emoji1, setEmoji1] = useState(
  "https://cdn.discordapp.com/attachments/953955636541014046/1010736462389592134/grinning.png"
);
const emojiSelect1 = (emoji) => {
  if (emoji.src) {
    setEmoji1(emoji.src);
    setIsEmojiOpen1(false);
  } else {
    const emojiCode = emoji?.unified;
    setEmoji1(`https://twemoji.maxcdn.com/v/latest/svg/${emojiCode}.svg`);
    setIsEmojiOpen1(false);
  }
};
<button onClick={() => setIsEmojiOpen1(!isEmojiOpen1)}>
  <img src={emoji1} alt="emoji" width="32" height="32" />
</button>;
<div>
  {isEmojiOpen1 && (
    <Picker data={data} onEmojiSelect={emojiSelect1} custom={customEmoji} />
  )}
</div>;

[Ryan0204]

Not sure why will show that error. When i first start the Picker, won't show that error. After selecting emoji 2-3 times, the error is shown

[Ryan0204]

I found that the useState data will change by "itself" when clicking the picker button. However i only setCustomEmoji when it fetch API, which will only fetch once when user refresh page.

One solution is keep fetching api, but i guess it's not the best. Any suggestion?

export default function Create() {
    const [isLoading, setLoading] = useState(true);
    const params = useParams();
    const [isEmojiOpen1, setIsEmojiOpen1] = useState(false);
    const [emoji1, setEmoji1] = useState({
        url: "https://cdn.discordapp.com/attachments/953955636541014046/1011576605656743946/unknown.png",
        name: "grinning",
        id: "1f600",
        emoji: "😀",
    });

    const emojiSelect1 = (emoji) => {
        if (emoji.src) {
            setEmoji1({
                url: emoji?.src,
                name: emoji?.name,
                id: emoji?.id,
            });
            setIsEmojiOpen1(false);
        } else {
            const emojiCode = emoji?.unified;
            setEmoji1({
                url: `https://twemoji.maxcdn.com/v/latest/svg/${emojiCode}.svg`,
                name: emoji?.name,
                id: emoji?.id,
                emoji: emoji?.native,
            });
            setIsEmojiOpen1(false);
        }
    };
    const [customEmoji, setcustomEmoji] = useState(null);
    useEffect(() => {
        axios
            .get(`http://localhost:80/v1/guilds/${params.guildId}/emojis`)
            .then((res) => {
                setcustomEmoji([
                    {
                        id: "discord",
                        name: "Disocrd",
                        emojis: res?.data?.emojis[0]?.emojis[0],
                    },
                ]);
                setLoading(false);
            });
    }, []);
    console.log(customEmoji)
    if (isLoading) {
        return <div className="text-white">Loading...</div>;
    }
    return (
        <>
            <button onClick={() => setIsEmojiOpen1(!isEmojiOpen1)}>
                <img src={emoji1?.url} alt="emoji" width="32" height="32" />
            </button>
            <div>
                {isEmojiOpen1 && (
                    <Picker
                        data={data}
                        onEmojiSelect={emojiSelect1}
                        custom={customEmoji}
                    />
                )}
            </div>
            <div>
                {isEmojiOpen1 && (
                    <Picker
                        data={data}
                        onEmojiSelect={emojiSelect1}
                        custom={customEmoji}
                    />
                )}
            </div>
        </>
    );
}