CODEWITHSUNDEEP
javascriptreactjs
Pulse Nova
Pulse Nova

Reputation: 327

Adding emoji is showing undefined when adding it for the first time only

Here, I have shown just the part of the code where the emoji picker is implemented. When I pick any emoji for the first time it shows me undefined. How can I resolve this issue?

Here's the screenshot of the issue.

Emoji Picker

Code Implementation

import { Picker } from "emoji-mart";

const ChatMain = (props) => {
  const [messageToSend, setMessageToSend] = useState();
  const [isEmojiPickerVisible, setEmojiPickerVisibility] = useState(false);
  return (
    <div className="row m-0 chat_footer_buttons">
      {isEmojiPickerVisible && (
        <Picker
          title=""
          showPreview={false}
          showSkinTones={false}
          color="#2189FF"
          onSelect={(emoji) => {
            setMessageToSend(messageToSend + emoji.native);
          }}
          style={{ position: "absolute", bottom: 85 }}
        />
      )}
      <div className="col text-center  d-flex justify-content-center chat_footer_button chat_footer_button_two">
        <button
          className={`p-0 btn btn-link outline-none shadow-none ${
            isEmojiPickerVisible ? "text-black" : "text-secondary"
          }`}
          onClick={() => setEmojiPickerVisibility(!isEmojiPickerVisible)}
        >
          <i className="fas fa-laugh" />
        </button>
      </div>
    </div>
  );
};

Upvotes: 1

Views: 652

Answers (1)

epascarello
epascarello

Reputation: 207511

You do not give a default value so it is undefined.

const [messageToSend, setMessageToSend] = useState('');

Upvotes: 1

Related Questions