Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";

export const EmojiSymbols = (props) => {
  // props destructuring
  const { onClickEmoji, hidden } = props;
  return (
    <div
      className="smiley-panel-body"
      style={{ display: hidden ? "block" : "none" }}
    >
      <div className="emoji-symbols">
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f441-1f5e8"
          data-shortname=":eye_in_speech_bubble:"
          data-index="1"
          title="eye in speech bubble"
          data-eid="2156"
        >
          <span className="emojione emojione-1f441-1f5e8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f498"
          data-shortname=":cupid:"
          data-index="2"
          title="heart with arrow"
          data-eid="497"
        >
          <span className="emojione emojione-1f498"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2764"
          data-shortname=":heart:"
          data-index="3"
          title="heavy black heart"
          data-eid="112"
        >
          <span className="emojione emojione-2764"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f493"
          data-shortname=":heartbeat:"
          data-index="4"
          title="beating heart"
          data-eid="482"
        >
          <span className="emojione emojione-1f493"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f494"
          data-shortname=":broken_heart:"
          data-index="5"
          title="broken heart"
          data-eid="485"
        >
          <span className="emojione emojione-1f494"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f495"
          data-shortname=":two_hearts:"
          data-index="6"
          title="two hearts"
          data-eid="488"
        >
          <span className="emojione emojione-1f495"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f496"
          data-shortname=":sparkling_heart:"
          data-index="7"
          title="sparkling heart"
          data-eid="491"
        >
          <span className="emojione emojione-1f496"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f497"
          data-shortname=":heartpulse:"
          data-index="8"
          title="growing heart"
          data-eid="494"
        >
          <span className="emojione emojione-1f497"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f499"
          data-shortname=":blue_heart:"
          data-index="9"
          title="blue heart"
          data-eid="500"
        >
          <span className="emojione emojione-1f499"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f49a"
          data-shortname=":green_heart:"
          data-index="10"
          title="green heart"
          data-eid="503"
        >
          <span className="emojione emojione-1f49a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f49b"
          data-shortname=":yellow_heart:"
          data-index="11"
          title="yellow heart"
          data-eid="506"
        >
          <span className="emojione emojione-1f49b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f49c"
          data-shortname=":purple_heart:"
          data-index="12"
          title="purple heart"
          data-eid="509"
        >
          <span className="emojione emojione-1f49c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5a4"
          data-shortname=":black_heart:"
          data-index="13"
          title="black heart"
          data-eid="2274"
        >
          <span className="emojione emojione-1f5a4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f49d"
          data-shortname=":gift_heart:"
          data-index="14"
          title="heart with ribbon"
          data-eid="512"
        >
          <span className="emojione emojione-1f49d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f49e"
          data-shortname=":revolving_hearts:"
          data-index="15"
          title="revolving hearts"
          data-eid="515"
        >
          <span className="emojione emojione-1f49e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f49f"
          data-shortname=":heart_decoration:"
          data-index="16"
          title="heart decoration"
          data-eid="518"
        >
          <span className="emojione emojione-1f49f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2763"
          data-shortname=":heart_exclamation:"
          data-index="17"
          title="heavy heart exclamation mark ornament"
          data-eid="1692"
        >
          <span className="emojione emojione-2763"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4a2"
          data-shortname=":anger:"
          data-index="18"
          title="anger symbol"
          data-eid="527"
        >
          <span className="emojione emojione-1f4a2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4a5"
          data-shortname=":boom:"
          data-index="19"
          title="collision symbol"
          data-eid="536"
        >
          <span className="emojione emojione-1f4a5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4ab"
          data-shortname=":dizzy:"
          data-index="20"
          title="dizzy symbol"
          data-eid="553"
        >
          <span className="emojione emojione-1f4ab"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4ac"
          data-shortname=":speech_balloon:"
          data-index="21"
          title="speech balloon"
          data-eid="556"
        >
          <span className="emojione emojione-1f4ac"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5e8"
          data-shortname=":speech_left:"
          data-index="22"
          title="left speech bubble"
          data-eid="1187"
        >
          <span className="emojione emojione-1f5e8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5ef"
          data-shortname=":anger_right:"
          data-index="23"
          title="right anger bubble"
          data-eid="1194"
        >
          <span className="emojione emojione-1f5ef"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4ad"
          data-shortname=":thought_balloon:"
          data-index="24"
          title="thought balloon"
          data-eid="828"
        >
          <span className="emojione emojione-1f4ad"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4ae"
          data-shortname=":white_flower:"
          data-index="25"
          title="white flower"
          data-eid="559"
        >
          <span className="emojione emojione-1f4ae"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f310"
          data-shortname=":globe_with_meridians:"
          data-index="26"
          title="globe with meridians"
          data-eid="790"
        >
          <span className="emojione emojione-1f310"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2668"
          data-shortname=":hotsprings:"
          data-index="27"
          title="hot springs"
          data-eid="70"
        >
          <span className="emojione emojione-2668"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6d1"
          data-shortname=":octagonal_sign:"
          data-index="28"
          title="octagonal sign"
          data-eid="2300"
        >
          <span className="emojione emojione-1f6d1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f55b"
          data-shortname=":clock12:"
          data-index="29"
          title="clock face twelve oclock"
          data-eid="612"
        >
          <span className="emojione emojione-1f55b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f567"
          data-shortname=":clock1230:"
          data-index="30"
          title="clock face twelve-thirty"
          data-eid="857"
        >
          <span className="emojione emojione-1f567"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f550"
          data-shortname=":clock1:"
          data-index="31"
          title="clock face one oclock"
          data-eid="594"
        >
          <span className="emojione emojione-1f550"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f55c"
          data-shortname=":clock130:"
          data-index="32"
          title="clock face one-thirty"
          data-eid="846"
        >
          <span className="emojione emojione-1f55c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f551"
          data-shortname=":clock2:"
          data-index="33"
          title="clock face two oclock"
          data-eid="596"
        >
          <span className="emojione emojione-1f551"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f55d"
          data-shortname=":clock230:"
          data-index="34"
          title="clock face two-thirty"
          data-eid="847"
        >
          <span className="emojione emojione-1f55d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f552"
          data-shortname=":clock3:"
          data-index="35"
          title="clock face three oclock"
          data-eid="598"
        >
          <span className="emojione emojione-1f552"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f55e"
          data-shortname=":clock330:"
          data-index="36"
          title="clock face three-thirty"
          data-eid="848"
        >
          <span className="emojione emojione-1f55e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f553"
          data-shortname=":clock4:"
          data-index="37"
          title="clock face four oclock"
          data-eid="600"
        >
          <span className="emojione emojione-1f553"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f55f"
          data-shortname=":clock430:"
          data-index="38"
          title="clock face four-thirty"
          data-eid="849"
        >
          <span className="emojione emojione-1f55f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f554"
          data-shortname=":clock5:"
          data-index="39"
          title="clock face five oclock"
          data-eid="602"
        >
          <span className="emojione emojione-1f554"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f560"
          data-shortname=":clock530:"
          data-index="40"
          title="clock face five-thirty"
          data-eid="850"
        >
          <span className="emojione emojione-1f560"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f555"
          data-shortname=":clock6:"
          data-index="41"
          title="clock face six oclock"
          data-eid="603"
        >
          <span className="emojione emojione-1f555"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f561"
          data-shortname=":clock630:"
          data-index="42"
          title="clock face six-thirty"
          data-eid="851"
        >
          <span className="emojione emojione-1f561"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f556"
          data-shortname=":clock7:"
          data-index="43"
          title="clock face seven oclock"
          data-eid="605"
        >
          <span className="emojione emojione-1f556"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f562"
          data-shortname=":clock730:"
          data-index="44"
          title="clock face seven-thirty"
          data-eid="852"
        >
          <span className="emojione emojione-1f562"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f557"
          data-shortname=":clock8:"
          data-index="45"
          title="clock face eight oclock"
          data-eid="606"
        >
          <span className="emojione emojione-1f557"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f563"
          data-shortname=":clock830:"
          data-index="46"
          title="clock face eight-thirty"
          data-eid="853"
        >
          <span className="emojione emojione-1f563"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f558"
          data-shortname=":clock9:"
          data-index="47"
          title="clock face nine oclock"
          data-eid="608"
        >
          <span className="emojione emojione-1f558"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f564"
          data-shortname=":clock930:"
          data-index="48"
          title="clock face nine-thirty"
          data-eid="854"
        >
          <span className="emojione emojione-1f564"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f559"
          data-shortname=":clock10:"
          data-index="49"
          title="clock face ten oclock"
          data-eid="609"
        >
          <span className="emojione emojione-1f559"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f565"
          data-shortname=":clock1030:"
          data-index="50"
          title="clock face ten-thirty"
          data-eid="855"
        >
          <span className="emojione emojione-1f565"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f55a"
          data-shortname=":clock11:"
          data-index="51"
          title="clock face eleven oclock"
          data-eid="611"
        >
          <span className="emojione emojione-1f55a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f566"
          data-shortname=":clock1130:"
          data-index="52"
          title="clock face eleven-thirty"
          data-eid="856"
        >
          <span className="emojione emojione-1f566"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f300"
          data-shortname=":cyclone:"
          data-index="53"
          title="cyclone"
          data-eid="173"
        >
          <span className="emojione emojione-1f300"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2660"
          data-shortname=":spades:"
          data-index="54"
          title="black spade suit"
          data-eid="66"
        >
          <span className="emojione emojione-2660"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2665"
          data-shortname=":hearts:"
          data-index="55"
          title="black heart suit"
          data-eid="68"
        >
          <span className="emojione emojione-2665"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2666"
          data-shortname=":diamonds:"
          data-index="56"
          title="black diamond suit"
          data-eid="69"
        >
          <span className="emojione emojione-2666"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2663"
          data-shortname=":clubs:"
          data-index="57"
          title="black club suit"
          data-eid="67"
        >
          <span className="emojione emojione-2663"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f0cf"
          data-shortname=":black_joker:"
          data-index="58"
          title="playing card black joker"
          data-eid="132"
        >
          <span className="emojione emojione-1f0cf"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f004"
          data-shortname=":mahjong:"
          data-index="59"
          title="mahjong tile red dragon"
          data-eid="131"
        >
          <span className="emojione emojione-1f004"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3b4"
          data-shortname=":flower_playing_cards:"
          data-index="60"
          title="flower playing cards"
          data-eid="306"
        >
          <span className="emojione emojione-1f3b4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f507"
          data-shortname=":mute:"
          data-index="61"
          title="speaker with cancellation stroke"
          data-eid="841"
        >
          <span className="emojione emojione-1f507"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f508"
          data-shortname=":speaker:"
          data-index="62"
          title="speaker"
          data-eid="861"
        >
          <span className="emojione emojione-1f508"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f509"
          data-shortname=":sound:"
          data-index="63"
          title="speaker with one sound wave"
          data-eid="842"
        >
          <span className="emojione emojione-1f509"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f50a"
          data-shortname=":loud_sound:"
          data-index="64"
          title="speaker with three sound waves"
          data-eid="519"
        >
          <span className="emojione emojione-1f50a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4e2"
          data-shortname=":loudspeaker:"
          data-index="65"
          title="public address loudspeaker"
          data-eid="484"
        >
          <span className="emojione emojione-1f4e2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4e3"
          data-shortname=":mega:"
          data-index="66"
          title="cheering megaphone"
          data-eid="486"
        >
          <span className="emojione emojione-1f4e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f514"
          data-shortname=":bell:"
          data-index="67"
          title="bell"
          data-eid="534"
        >
          <span className="emojione emojione-1f514"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f515"
          data-shortname=":no_bell:"
          data-index="68"
          title="bell with cancellation stroke"
          data-eid="843"
        >
          <span className="emojione emojione-1f515"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3b5"
          data-shortname=":musical_note:"
          data-index="69"
          title="musical note"
          data-eid="307"
        >
          <span className="emojione emojione-1f3b5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3b6"
          data-shortname=":notes:"
          data-index="70"
          title="multiple musical notes"
          data-eid="308"
        >
          <span className="emojione emojione-1f3b6"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4b9"
          data-shortname=":chart:"
          data-index="71"
          title="chart with upwards trend and yen sign"
          data-eid="584"
        >
          <span className="emojione emojione-1f4b9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4b1"
          data-shortname=":currency_exchange:"
          data-index="72"
          title="currency exchange"
          data-eid="568"
        >
          <span className="emojione emojione-1f4b1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4b2"
          data-shortname=":heavy_dollar_sign:"
          data-index="73"
          title="heavy dollar sign"
          data-eid="570"
        >
          <span className="emojione emojione-1f4b2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3e7"
          data-shortname=":atm:"
          data-index="74"
          title="automated teller machine"
          data-eid="332"
        >
          <span className="emojione emojione-1f3e7"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6ae"
          data-shortname=":put_litter_in_its_place:"
          data-index="75"
          title="put litter in its place symbol"
          data-eid="773"
        >
          <span className="emojione emojione-1f6ae"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6b0"
          data-shortname=":potable_water:"
          data-index="76"
          title="potable water symbol"
          data-eid="775"
        >
          <span className="emojione emojione-1f6b0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="267f"
          data-shortname=":wheelchair:"
          data-index="77"
          title="wheelchair symbol"
          data-eid="72"
        >
          <span className="emojione emojione-267f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6b9"
          data-shortname=":mens:"
          data-index="78"
          title="mens symbol"
          data-eid="716"
        >
          <span className="emojione emojione-1f6b9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6ba"
          data-shortname=":womens:"
          data-index="79"
          title="womens symbol"
          data-eid="717"
        >
          <span className="emojione emojione-1f6ba"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6bb"
          data-shortname=":restroom:"
          data-index="80"
          title="restroom"
          data-eid="718"
        >
          <span className="emojione emojione-1f6bb"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6bc"
          data-shortname=":baby_symbol:"
          data-index="81"
          title="baby symbol"
          data-eid="719"
        >
          <span className="emojione emojione-1f6bc"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6be"
          data-shortname=":wc:"
          data-index="82"
          title="water closet"
          data-eid="721"
        >
          <span className="emojione emojione-1f6be"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6c2"
          data-shortname=":passport_control:"
          data-index="83"
          title="passport control"
          data-eid="784"
        >
          <span className="emojione emojione-1f6c2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6c3"
          data-shortname=":customs:"
          data-index="84"
          title="customs"
          data-eid="785"
        >
          <span className="emojione emojione-1f6c3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6c4"
          data-shortname=":baggage_claim:"
          data-index="85"
          title="baggage claim"
          data-eid="786"
        >
          <span className="emojione emojione-1f6c4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6c5"
          data-shortname=":left_luggage:"
          data-index="86"
          title="left luggage"
          data-eid="787"
        >
          <span className="emojione emojione-1f6c5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26a0"
          data-shortname=":warning:"
          data-index="87"
          title="warning sign"
          data-eid="74"
        >
          <span className="emojione emojione-26a0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6b8"
          data-shortname=":children_crossing:"
          data-index="88"
          title="children crossing"
          data-eid="781"
        >
          <span className="emojione emojione-1f6b8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26d4"
          data-shortname=":no_entry:"
          data-index="89"
          title="no entry"
          data-eid="83"
        >
          <span className="emojione emojione-26d4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6ab"
          data-shortname=":no_entry_sign:"
          data-index="90"
          title="no entry sign"
          data-eid="711"
        >
          <span className="emojione emojione-1f6ab"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6b3"
          data-shortname=":no_bicycles:"
          data-index="91"
          title="no bicycles"
          data-eid="777"
        >
          <span className="emojione emojione-1f6b3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6ad"
          data-shortname=":no_smoking:"
          data-index="92"
          title="no smoking symbol"
          data-eid="713"
        >
          <span className="emojione emojione-1f6ad"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6af"
          data-shortname=":do_not_litter:"
          data-index="93"
          title="do not litter symbol"
          data-eid="774"
        >
          <span className="emojione emojione-1f6af"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6b1"
          data-shortname=":non-potable_water:"
          data-index="94"
          title="non-potable water symbol"
          data-eid="776"
        >
          <span className="emojione emojione-1f6b1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6b7"
          data-shortname=":no_pedestrians:"
          data-index="95"
          title="no pedestrians"
          data-eid="780"
        >
          <span className="emojione emojione-1f6b7"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4f5"
          data-shortname=":no_mobile_phones:"
          data-index="96"
          title="no mobile phones"
          data-eid="834"
        >
          <span className="emojione emojione-1f4f5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f51e"
          data-shortname=":underage:"
          data-index="97"
          title="no one under eighteen symbol"
          data-eid="547"
        >
          <span className="emojione emojione-1f51e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2622"
          data-shortname=":radioactive:"
          data-index="98"
          title="radioactive sign"
          data-eid="1653"
        >
          <span className="emojione emojione-2622"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2623"
          data-shortname=":biohazard:"
          data-index="99"
          title="biohazard sign"
          data-eid="1654"
        >
          <span className="emojione emojione-2623"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2b06"
          data-shortname=":arrow_up:"
          data-index="100"
          title="upwards black arrow"
          data-eid="121"
        >
          <span className="emojione emojione-2b06"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2197"
          data-shortname=":arrow_upper_right:"
          data-index="101"
          title="north east arrow"
          data-eid="24"
        >
          <span className="emojione emojione-2197"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="27a1"
          data-shortname=":arrow_right:"
          data-index="102"
          title="black rightwards arrow"
          data-eid="116"
        >
          <span className="emojione emojione-27a1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2198"
          data-shortname=":arrow_lower_right:"
          data-index="103"
          title="south east arrow"
          data-eid="25"
        >
          <span className="emojione emojione-2198"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2b07"
          data-shortname=":arrow_down:"
          data-index="104"
          title="downwards black arrow"
          data-eid="122"
        >
          <span className="emojione emojione-2b07"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2199"
          data-shortname=":arrow_lower_left:"
          data-index="105"
          title="south west arrow"
          data-eid="26"
        >
          <span className="emojione emojione-2199"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2b05"
          data-shortname=":arrow_left:"
          data-index="106"
          title="leftwards black arrow"
          data-eid="120"
        >
          <span className="emojione emojione-2b05"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2196"
          data-shortname=":arrow_upper_left:"
          data-index="107"
          title="north west arrow"
          data-eid="23"
        >
          <span className="emojione emojione-2196"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2195"
          data-shortname=":arrow_up_down:"
          data-index="108"
          title="up down arrow"
          data-eid="22"
        >
          <span className="emojione emojione-2195"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2194"
          data-shortname=":left_right_arrow:"
          data-index="109"
          title="left right arrow"
          data-eid="21"
        >
          <span className="emojione emojione-2194"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="21a9"
          data-shortname=":leftwards_arrow_with_hook:"
          data-index="110"
          title="leftwards arrow with hook"
          data-eid="27"
        >
          <span className="emojione emojione-21a9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="21aa"
          data-shortname=":arrow_right_hook:"
          data-index="111"
          title="rightwards arrow with hook"
          data-eid="28"
        >
          <span className="emojione emojione-21aa"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2934"
          data-shortname=":arrow_heading_up:"
          data-index="112"
          title="arrow pointing rightwards then curving upwards"
          data-eid="118"
        >
          <span className="emojione emojione-2934"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2935"
          data-shortname=":arrow_heading_down:"
          data-index="113"
          title="arrow pointing rightwards then curving downwards"
          data-eid="119"
        >
          <span className="emojione emojione-2935"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f503"
          data-shortname=":arrows_clockwise:"
          data-index="114"
          title="clockwise downwards and upwards open circle arrows"
          data-eid="517"
        >
          <span className="emojione emojione-1f503"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f504"
          data-shortname=":arrows_counterclockwise:"
          data-index="115"
          title="anticlockwise downwards and upwards open circle arrows"
          data-eid="838"
        >
          <span className="emojione emojione-1f504"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f519"
          data-shortname=":back:"
          data-index="116"
          title="back with leftwards arrow above"
          data-eid="540"
        >
          <span className="emojione emojione-1f519"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f51a"
          data-shortname=":end:"
          data-index="117"
          title="end with leftwards arrow above"
          data-eid="541"
        >
          <span className="emojione emojione-1f51a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f51b"
          data-shortname=":on:"
          data-index="118"
          title="on with exclamation mark with left right arrow abo"
          data-eid="543"
        >
          <span className="emojione emojione-1f51b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f51c"
          data-shortname=":soon:"
          data-index="119"
          title="soon with rightwards arrow above"
          data-eid="544"
        >
          <span className="emojione emojione-1f51c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f51d"
          data-shortname=":top:"
          data-index="120"
          title="top with upwards arrow above"
          data-eid="546"
        >
          <span className="emojione emojione-1f51d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6d0"
          data-shortname=":place_of_worship:"
          data-index="121"
          title="place of worship"
          data-eid="2100"
        >
          <span className="emojione emojione-1f6d0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="269b"
          data-shortname=":atom:"
          data-index="122"
          title="atom symbol"
          data-eid="1676"
        >
          <span className="emojione emojione-269b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f549"
          data-shortname=":om_symbol:"
          data-index="123"
          title="om symbol"
          data-eid="1113"
        >
          <span className="emojione emojione-1f549"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2721"
          data-shortname=":star_of_david:"
          data-index="124"
          title="star of david"
          data-eid="1691"
        >
          <span className="emojione emojione-2721"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2638"
          data-shortname=":wheel_of_dharma:"
          data-index="125"
          title="wheel of dharma"
          data-eid="1659"
        >
          <span className="emojione emojione-2638"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="262f"
          data-shortname=":yin_yang:"
          data-index="126"
          title="yin yang"
          data-eid="1658"
        >
          <span className="emojione emojione-262f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="271d"
          data-shortname=":cross:"
          data-index="127"
          title="latin cross"
          data-eid="1111"
        >
          <span className="emojione emojione-271d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2626"
          data-shortname=":orthodox_cross:"
          data-index="128"
          title="orthodox cross"
          data-eid="1655"
        >
          <span className="emojione emojione-2626"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="262a"
          data-shortname=":star_and_crescent:"
          data-index="129"
          title="star and crescent"
          data-eid="1656"
        >
          <span className="emojione emojione-262a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="262e"
          data-shortname=":peace:"
          data-index="130"
          title="peace symbol"
          data-eid="1657"
        >
          <span className="emojione emojione-262e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f54e"
          data-shortname=":menorah:"
          data-index="131"
          title="menorah with nine branches"
          data-eid="2104"
        >
          <span className="emojione emojione-1f54e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f52f"
          data-shortname=":six_pointed_star:"
          data-index="132"
          title="six pointed star with middle dot"
          data-eid="571"
        >
          <span className="emojione emojione-1f52f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2648"
          data-shortname=":aries:"
          data-index="133"
          title="aries"
          data-eid="54"
        >
          <span className="emojione emojione-2648"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2649"
          data-shortname=":taurus:"
          data-index="134"
          title="taurus"
          data-eid="55"
        >
          <span className="emojione emojione-2649"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="264a"
          data-shortname=":gemini:"
          data-index="135"
          title="gemini"
          data-eid="56"
        >
          <span className="emojione emojione-264a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="264b"
          data-shortname=":cancer:"
          data-index="136"
          title="cancer"
          data-eid="57"
        >
          <span className="emojione emojione-264b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="264c"
          data-shortname=":leo:"
          data-index="137"
          title="leo"
          data-eid="58"
        >
          <span className="emojione emojione-264c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="264d"
          data-shortname=":virgo:"
          data-index="138"
          title="virgo"
          data-eid="59"
        >
          <span className="emojione emojione-264d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="264e"
          data-shortname=":libra:"
          data-index="139"
          title="libra"
          data-eid="60"
        >
          <span className="emojione emojione-264e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="264f"
          data-shortname=":scorpius:"
          data-index="140"
          title="scorpius"
          data-eid="61"
        >
          <span className="emojione emojione-264f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2650"
          data-shortname=":sagittarius:"
          data-index="141"
          title="sagittarius"
          data-eid="62"
        >
          <span className="emojione emojione-2650"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2651"
          data-shortname=":capricorn:"
          data-index="142"
          title="capricorn"
          data-eid="63"
        >
          <span className="emojione emojione-2651"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2652"
          data-shortname=":aquarius:"
          data-index="143"
          title="aquarius"
          data-eid="64"
        >
          <span className="emojione emojione-2652"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2653"
          data-shortname=":pisces:"
          data-index="144"
          title="pisces"
          data-eid="65"
        >
          <span className="emojione emojione-2653"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26ce"
          data-shortname=":ophiuchus:"
          data-index="145"
          title="ophiuchus"
          data-eid="82"
        >
          <span className="emojione emojione-26ce"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f500"
          data-shortname=":twisted_rightwards_arrows:"
          data-index="146"
          title="twisted rightwards arrows"
          data-eid="835"
        >
          <span className="emojione emojione-1f500"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f501"
          data-shortname=":repeat:"
          data-index="147"
          title="clockwise rightwards and leftwards open circle arrows"
          data-eid="836"
        >
          <span className="emojione emojione-1f501"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f502"
          data-shortname=":repeat_one:"
          data-index="148"
          title="clockwise rightwards and leftwards open circle arrows with circled one overlay"
          data-eid="837"
        >
          <span className="emojione emojione-1f502"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="25b6"
          data-shortname=":arrow_forward:"
          data-index="149"
          title="black right-pointing triangle"
          data-eid="40"
        >
          <span className="emojione emojione-25b6"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23e9"
          data-shortname=":fast_forward:"
          data-index="150"
          title="black right-pointing double triangle"
          data-eid="31"
        >
          <span className="emojione emojione-23e9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23ed"
          data-shortname=":track_next:"
          data-index="151"
          title="black right-pointing double triangle with vertical bar"
          data-eid="1640"
        >
          <span className="emojione emojione-23ed"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23ef"
          data-shortname=":play_pause:"
          data-index="152"
          title="black right-pointing double triangle with double vertical bar"
          data-eid="1642"
        >
          <span className="emojione emojione-23ef"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="25c0"
          data-shortname=":arrow_backward:"
          data-index="153"
          title="black left-pointing triangle"
          data-eid="41"
        >
          <span className="emojione emojione-25c0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23ea"
          data-shortname=":rewind:"
          data-index="154"
          title="black left-pointing double triangle"
          data-eid="32"
        >
          <span className="emojione emojione-23ea"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23ee"
          data-shortname=":track_previous:"
          data-index="155"
          title="black left-pointing double triangle with vertical bar"
          data-eid="1641"
        >
          <span className="emojione emojione-23ee"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f53c"
          data-shortname=":arrow_up_small:"
          data-index="156"
          title="up-pointing small red triangle"
          data-eid="591"
        >
          <span className="emojione emojione-1f53c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23eb"
          data-shortname=":arrow_double_up:"
          data-index="157"
          title="black up-pointing double triangle"
          data-eid="33"
        >
          <span className="emojione emojione-23eb"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f53d"
          data-shortname=":arrow_down_small:"
          data-index="158"
          title="down-pointing small red triangle"
          data-eid="593"
        >
          <span className="emojione emojione-1f53d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23ec"
          data-shortname=":arrow_double_down:"
          data-index="159"
          title="black down-pointing double triangle"
          data-eid="34"
        >
          <span className="emojione emojione-23ec"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23f8"
          data-shortname=":pause_button:"
          data-index="160"
          title="double vertical bar"
          data-eid="1645"
        >
          <span className="emojione emojione-23f8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23f9"
          data-shortname=":stop_button:"
          data-index="161"
          title="black square for stop"
          data-eid="1646"
        >
          <span className="emojione emojione-23f9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23fa"
          data-shortname=":record_button:"
          data-index="162"
          title="black circle for record"
          data-eid="1647"
        >
          <span className="emojione emojione-23fa"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23cf"
          data-shortname=":eject:"
          data-index="163"
          title="eject symbol"
          data-eid="1639"
        >
          <span className="emojione emojione-23cf"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3a6"
          data-shortname=":cinema:"
          data-index="164"
          title="cinema"
          data-eid="292"
        >
          <span className="emojione emojione-1f3a6"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f505"
          data-shortname=":low_brightness:"
          data-index="165"
          title="low brightness symbol"
          data-eid="839"
        >
          <span className="emojione emojione-1f505"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f506"
          data-shortname=":high_brightness:"
          data-index="166"
          title="high brightness symbol"
          data-eid="840"
        >
          <span className="emojione emojione-1f506"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4f6"
          data-shortname=":signal_strength:"
          data-index="167"
          title="antenna with bars"
          data-eid="508"
        >
          <span className="emojione emojione-1f4f6"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4f3"
          data-shortname=":vibration_mode:"
          data-index="168"
          title="vibration mode"
          data-eid="505"
        >
          <span className="emojione emojione-1f4f3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4f4"
          data-shortname=":mobile_phone_off:"
          data-index="169"
          title="mobile phone off"
          data-eid="507"
        >
          <span className="emojione emojione-1f4f4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="267b"
          data-shortname=":recycle:"
          data-index="170"
          title="black universal recycling symbol"
          data-eid="71"
        >
          <span className="emojione emojione-267b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4db"
          data-shortname=":name_badge:"
          data-index="171"
          title="name badge"
          data-eid="472"
        >
          <span className="emojione emojione-1f4db"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="269c"
          data-shortname=":fleur-de-lis:"
          data-index="172"
          title="fleur-de-lis"
          data-eid="1677"
        >
          <span className="emojione emojione-269c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f530"
          data-shortname=":beginner:"
          data-index="173"
          title="japanese symbol for beginner"
          data-eid="573"
        >
          <span className="emojione emojione-1f530"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f531"
          data-shortname=":trident:"
          data-index="174"
          title="trident emblem"
          data-eid="574"
        >
          <span className="emojione emojione-1f531"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2b55"
          data-shortname=":o:"
          data-index="175"
          title="heavy large circle"
          data-eid="126"
        >
          <span className="emojione emojione-2b55"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2705"
          data-shortname=":white_check_mark:"
          data-index="176"
          title="white heavy check mark"
          data-eid="91"
        >
          <span className="emojione emojione-2705"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2611"
          data-shortname=":ballot_box_with_check:"
          data-index="177"
          title="ballot box with check"
          data-eid="49"
        >
          <span className="emojione emojione-2611"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2714"
          data-shortname=":heavy_check_mark:"
          data-index="178"
          title="heavy check mark"
          data-eid="99"
        >
          <span className="emojione emojione-2714"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2716"
          data-shortname=":heavy_multiplication_x:"
          data-index="179"
          title="heavy multiplication x"
          data-eid="100"
        >
          <span className="emojione emojione-2716"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="274c"
          data-shortname=":x:"
          data-index="180"
          title="cross mark"
          data-eid="106"
        >
          <span className="emojione emojione-274c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="274e"
          data-shortname=":negative_squared_cross_mark:"
          data-index="181"
          title="negative squared cross mark"
          data-eid="107"
        >
          <span className="emojione emojione-274e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2795"
          data-shortname=":heavy_plus_sign:"
          data-index="182"
          title="heavy plus sign"
          data-eid="113"
        >
          <span className="emojione emojione-2795"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2796"
          data-shortname=":heavy_minus_sign:"
          data-index="183"
          title="heavy minus sign"
          data-eid="114"
        >
          <span className="emojione emojione-2796"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2797"
          data-shortname=":heavy_division_sign:"
          data-index="184"
          title="heavy division sign"
          data-eid="115"
        >
          <span className="emojione emojione-2797"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="27b0"
          data-shortname=":curly_loop:"
          data-index="185"
          title="curly loop"
          data-eid="117"
        >
          <span className="emojione emojione-27b0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="27bf"
          data-shortname=":loop:"
          data-index="186"
          title="double curly loop"
          data-eid="863"
        >
          <span className="emojione emojione-27bf"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="303d"
          data-shortname=":part_alternation_mark:"
          data-index="187"
          title="part alternation mark"
          data-eid="128"
        >
          <span className="emojione emojione-303d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2733"
          data-shortname=":eight_spoked_asterisk:"
          data-index="188"
          title="eight spoked asterisk"
          data-eid="102"
        >
          <span className="emojione emojione-2733"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2734"
          data-shortname=":eight_pointed_black_star:"
          data-index="189"
          title="eight pointed black star"
          data-eid="103"
        >
          <span className="emojione emojione-2734"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2747"
          data-shortname=":sparkle:"
          data-index="190"
          title="sparkle"
          data-eid="105"
        >
          <span className="emojione emojione-2747"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="203c"
          data-shortname=":bangbang:"
          data-index="191"
          title="double exclamation mark"
          data-eid="17"
        >
          <span className="emojione emojione-203c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2049"
          data-shortname=":interrobang:"
          data-index="192"
          title="exclamation question mark"
          data-eid="18"
        >
          <span className="emojione emojione-2049"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2753"
          data-shortname=":question:"
          data-index="193"
          title="black question mark ornament"
          data-eid="108"
        >
          <span className="emojione emojione-2753"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2754"
          data-shortname=":grey_question:"
          data-index="194"
          title="white question mark ornament"
          data-eid="109"
        >
          <span className="emojione emojione-2754"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2755"
          data-shortname=":grey_exclamation:"
          data-index="195"
          title="white exclamation mark ornament"
          data-eid="110"
        >
          <span className="emojione emojione-2755"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2757"
          data-shortname=":exclamation:"
          data-index="196"
          title="heavy exclamation mark symbol"
          data-eid="111"
        >
          <span className="emojione emojione-2757"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="3030"
          data-shortname=":wavy_dash:"
          data-index="197"
          title="wavy dash"
          data-eid="127"
        >
          <span className="emojione emojione-3030"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="00a9"
          data-shortname=":copyright:"
          data-index="198"
          title="copyright sign"
          data-eid="12"
        >
          <span className="emojione emojione-00a9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="00ae"
          data-shortname=":registered:"
          data-index="199"
          title="registered sign"
          data-eid="13"
        >
          <span className="emojione emojione-00ae"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2122"
          data-shortname=":tm:"
          data-index="200"
          title="trade mark sign"
          data-eid="19"
        >
          <span className="emojione emojione-2122"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="0023-20e3"
          data-shortname=":hash:"
          data-index="201"
          title="keycap number sign"
          data-eid="1"
        >
          <span className="emojione emojione-0023-20e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="002a-20e3"
          data-shortname=":asterisk:"
          data-index="202"
          title="keycap asterisk"
          data-eid="1638"
        >
          <span className="emojione emojione-002a-20e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="0030-20e3"
          data-shortname=":zero:"
          data-index="203"
          title="keycap digit zero"
          data-eid="2"
        >
          <span className="emojione emojione-0030-20e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="0031-20e3"
          data-shortname=":one:"
          data-index="204"
          title="keycap digit one"
          data-eid="3"
        >
          <span className="emojione emojione-0031-20e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="0032-20e3"
          data-shortname=":two:"
          data-index="205"
          title="keycap digit two"
          data-eid="4"
        >
          <span className="emojione emojione-0032-20e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="0033-20e3"
          data-shortname=":three:"
          data-index="206"
          title="keycap digit three"
          data-eid="5"
        >
          <span className="emojione emojione-0033-20e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="0034-20e3"
          data-shortname=":four:"
          data-index="207"
          title="keycap digit four"
          data-eid="6"
        >
          <span className="emojione emojione-0034-20e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="0035-20e3"
          data-shortname=":five:"
          data-index="208"
          title="keycap digit five"
          data-eid="7"
        >
          <span className="emojione emojione-0035-20e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="0036-20e3"
          data-shortname=":six:"
          data-index="209"
          title="keycap digit six"
          data-eid="8"
        >
          <span className="emojione emojione-0036-20e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="0037-20e3"
          data-shortname=":seven:"
          data-index="210"
          title="keycap digit seven"
          data-eid="9"
        >
          <span className="emojione emojione-0037-20e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="0038-20e3"
          data-shortname=":eight:"
          data-index="211"
          title="keycap digit eight"
          data-eid="10"
        >
          <span className="emojione emojione-0038-20e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="0039-20e3"
          data-shortname=":nine:"
          data-index="212"
          title="keycap digit nine"
          data-eid="11"
        >
          <span className="emojione emojione-0039-20e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f51f"
          data-shortname=":keycap_ten:"
          data-index="213"
          title="keycap ten"
          data-eid="549"
        >
          <span className="emojione emojione-1f51f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4af"
          data-shortname=":100:"
          data-index="214"
          title="hundred points symbol"
          data-eid="562"
        >
          <span className="emojione emojione-1f4af"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f520"
          data-shortname=":capital_abcd:"
          data-index="215"
          title="input symbol for latin capital letters"
          data-eid="551"
        >
          <span className="emojione emojione-1f520"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f521"
          data-shortname=":abcd:"
          data-index="216"
          title="input symbol for latin small letters"
          data-eid="552"
        >
          <span className="emojione emojione-1f521"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f522"
          data-shortname=":1234:"
          data-index="217"
          title="input symbol for numbers"
          data-eid="554"
        >
          <span className="emojione emojione-1f522"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f523"
          data-shortname=":symbols:"
          data-index="218"
          title="input symbol for symbols"
          data-eid="555"
        >
          <span className="emojione emojione-1f523"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f524"
          data-shortname=":abc:"
          data-index="219"
          title="input symbol for latin letters"
          data-eid="557"
        >
          <span className="emojione emojione-1f524"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f170"
          data-shortname=":a:"
          data-index="220"
          title="negative squared latin capital letter a"
          data-eid="133"
        >
          <span className="emojione emojione-1f170"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f18e"
          data-shortname=":ab:"
          data-index="221"
          title="negative squared ab"
          data-eid="137"
        >
          <span className="emojione emojione-1f18e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f171"
          data-shortname=":b:"
          data-index="222"
          title="negative squared latin capital letter b"
          data-eid="134"
        >
          <span className="emojione emojione-1f171"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f191"
          data-shortname=":cl:"
          data-index="223"
          title="squared cl"
          data-eid="138"
        >
          <span className="emojione emojione-1f191"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f192"
          data-shortname=":cool:"
          data-index="224"
          title="squared cool"
          data-eid="139"
        >
          <span className="emojione emojione-1f192"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f193"
          data-shortname=":free:"
          data-index="225"
          title="squared free"
          data-eid="140"
        >
          <span className="emojione emojione-1f193"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2139"
          data-shortname=":information_source:"
          data-index="226"
          title="information source"
          data-eid="20"
        >
          <span className="emojione emojione-2139"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f194"
          data-shortname=":id:"
          data-index="227"
          title="squared id"
          data-eid="141"
        >
          <span className="emojione emojione-1f194"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="24c2"
          data-shortname=":m:"
          data-index="228"
          title="circled latin capital letter m"
          data-eid="37"
        >
          <span className="emojione emojione-24c2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f195"
          data-shortname=":new:"
          data-index="229"
          title="squared new"
          data-eid="142"
        >
          <span className="emojione emojione-1f195"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f196"
          data-shortname=":ng:"
          data-index="230"
          title="squared ng"
          data-eid="143"
        >
          <span className="emojione emojione-1f196"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f17e"
          data-shortname=":o2:"
          data-index="231"
          title="negative squared latin capital letter o"
          data-eid="135"
        >
          <span className="emojione emojione-1f17e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f197"
          data-shortname=":ok:"
          data-index="232"
          title="squared ok"
          data-eid="144"
        >
          <span className="emojione emojione-1f197"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f17f"
          data-shortname=":parking:"
          data-index="233"
          title="negative squared latin capital letter p"
          data-eid="136"
        >
          <span className="emojione emojione-1f17f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f198"
          data-shortname=":sos:"
          data-index="234"
          title="squared sos"
          data-eid="145"
        >
          <span className="emojione emojione-1f198"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f199"
          data-shortname=":up:"
          data-index="235"
          title="squared up with exclamation mark"
          data-eid="146"
        >
          <span className="emojione emojione-1f199"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f19a"
          data-shortname=":vs:"
          data-index="236"
          title="squared vs"
          data-eid="147"
        >
          <span className="emojione emojione-1f19a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f201"
          data-shortname=":koko:"
          data-index="237"
          title="squared katakana koko"
          data-eid="158"
        >
          <span className="emojione emojione-1f201"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f202"
          data-shortname=":sa:"
          data-index="238"
          title="squared katakana sa"
          data-eid="159"
        >
          <span className="emojione emojione-1f202"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f237"
          data-shortname=":u6708:"
          data-index="239"
          title="squared cjk unified ideograph-6708"
          data-eid="167"
        >
          <span className="emojione emojione-1f237"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f236"
          data-shortname=":u6709:"
          data-index="240"
          title="squared cjk unified ideograph-6709"
          data-eid="166"
        >
          <span className="emojione emojione-1f236"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f22f"
          data-shortname=":u6307:"
          data-index="241"
          title="squared cjk unified ideograph-6307"
          data-eid="161"
        >
          <span className="emojione emojione-1f22f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f250"
          data-shortname=":ideograph_advantage:"
          data-index="242"
          title="circled ideograph advantage"
          data-eid="171"
        >
          <span className="emojione emojione-1f250"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f239"
          data-shortname=":u5272:"
          data-index="243"
          title="squared cjk unified ideograph-5272"
          data-eid="169"
        >
          <span className="emojione emojione-1f239"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f21a"
          data-shortname=":u7121:"
          data-index="244"
          title="squared cjk unified ideograph-7121"
          data-eid="160"
        >
          <span className="emojione emojione-1f21a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f232"
          data-shortname=":u7981:"
          data-index="245"
          title="squared cjk unified ideograph-7981"
          data-eid="162"
        >
          <span className="emojione emojione-1f232"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f251"
          data-shortname=":accept:"
          data-index="246"
          title="circled ideograph accept"
          data-eid="172"
        >
          <span className="emojione emojione-1f251"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f238"
          data-shortname=":u7533:"
          data-index="247"
          title="squared cjk unified ideograph-7533"
          data-eid="168"
        >
          <span className="emojione emojione-1f238"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f234"
          data-shortname=":u5408:"
          data-index="248"
          title="squared cjk unified ideograph-5408"
          data-eid="164"
        >
          <span className="emojione emojione-1f234"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f233"
          data-shortname=":u7a7a:"
          data-index="249"
          title="squared cjk unified ideograph-7a7a"
          data-eid="163"
        >
          <span className="emojione emojione-1f233"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="3297"
          data-shortname=":congratulations:"
          data-index="250"
          title="circled ideograph congratulation"
          data-eid="129"
        >
          <span className="emojione emojione-3297"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="3299"
          data-shortname=":secret:"
          data-index="251"
          title="circled ideograph secret"
          data-eid="130"
        >
          <span className="emojione emojione-3299"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f23a"
          data-shortname=":u55b6:"
          data-index="252"
          title="squared cjk unified ideograph-55b6"
          data-eid="170"
        >
          <span className="emojione emojione-1f23a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f235"
          data-shortname=":u6e80:"
          data-index="253"
          title="squared cjk unified ideograph-6e80"
          data-eid="165"
        >
          <span className="emojione emojione-1f235"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="25aa"
          data-shortname=":black_small_square:"
          data-index="254"
          title="black small square"
          data-eid="38"
        >
          <span className="emojione emojione-25aa"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="25ab"
          data-shortname=":white_small_square:"
          data-index="255"
          title="white small square"
          data-eid="39"
        >
          <span className="emojione emojione-25ab"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="25fb"
          data-shortname=":white_medium_square:"
          data-index="256"
          title="white medium square"
          data-eid="42"
        >
          <span className="emojione emojione-25fb"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="25fc"
          data-shortname=":black_medium_square:"
          data-index="257"
          title="black medium square"
          data-eid="43"
        >
          <span className="emojione emojione-25fc"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="25fd"
          data-shortname=":white_medium_small_square:"
          data-index="258"
          title="white medium small square"
          data-eid="44"
        >
          <span className="emojione emojione-25fd"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="25fe"
          data-shortname=":black_medium_small_square:"
          data-index="259"
          title="black medium small square"
          data-eid="45"
        >
          <span className="emojione emojione-25fe"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2b1b"
          data-shortname=":black_large_square:"
          data-index="260"
          title="black large square"
          data-eid="123"
        >
          <span className="emojione emojione-2b1b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2b1c"
          data-shortname=":white_large_square:"
          data-index="261"
          title="white large square"
          data-eid="124"
        >
          <span className="emojione emojione-2b1c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f536"
          data-shortname=":large_orange_diamond:"
          data-index="262"
          title="large orange diamond"
          data-eid="582"
        >
          <span className="emojione emojione-1f536"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f537"
          data-shortname=":large_blue_diamond:"
          data-index="263"
          title="large blue diamond"
          data-eid="583"
        >
          <span className="emojione emojione-1f537"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f538"
          data-shortname=":small_orange_diamond:"
          data-index="264"
          title="small orange diamond"
          data-eid="585"
        >
          <span className="emojione emojione-1f538"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f539"
          data-shortname=":small_blue_diamond:"
          data-index="265"
          title="small blue diamond"
          data-eid="586"
        >
          <span className="emojione emojione-1f539"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f53a"
          data-shortname=":small_red_triangle:"
          data-index="266"
          title="up-pointing red triangle"
          data-eid="588"
        >
          <span className="emojione emojione-1f53a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f53b"
          data-shortname=":small_red_triangle_down:"
          data-index="267"
          title="down-pointing red triangle"
          data-eid="589"
        >
          <span className="emojione emojione-1f53b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4a0"
          data-shortname=":diamond_shape_with_a_dot_inside:"
          data-index="268"
          title="diamond shape with a dot inside"
          data-eid="521"
        >
          <span className="emojione emojione-1f4a0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f518"
          data-shortname=":radio_button:"
          data-index="269"
          title="radio button"
          data-eid="538"
        >
          <span className="emojione emojione-1f518"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f532"
          data-shortname=":black_square_button:"
          data-index="270"
          title="black square button"
          data-eid="576"
        >
          <span className="emojione emojione-1f532"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f533"
          data-shortname=":white_square_button:"
          data-index="271"
          title="white square button"
          data-eid="577"
        >
          <span className="emojione emojione-1f533"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26aa"
          data-shortname=":white_circle:"
          data-index="272"
          title="white circle"
          data-eid="76"
        >
          <span className="emojione emojione-26aa"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26ab"
          data-shortname=":black_circle:"
          data-index="273"
          title="black circle"
          data-eid="77"
        >
          <span className="emojione emojione-26ab"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f534"
          data-shortname=":red_circle:"
          data-index="274"
          title="red circle"
          data-eid="579"
        >
          <span className="emojione emojione-1f534"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f535"
          data-shortname=":blue_circle:"
          data-index="275"
          title="blue circle"
          data-eid="580"
        >
          <span className="emojione emojione-1f535"></span>
        </span>
      </div>
    </div>
  );
};