Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";

export const EmojiObjects = (props) => {
  // props destructuring
  const { onClickEmoji, hidden } = props;
  return (
    <div
      className="smiley-panel-body"
      style={{ display: hidden ? "block" : "none" }}
    >
      <div className="emoji-objects">
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2620"
          data-shortname=":skull_crossbones:"
          data-index="1"
          title="skull and crossbones"
          data-eid="1652"
        >
          <span className="emojione emojione-2620"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f48c"
          data-shortname=":love_letter:"
          data-index="2"
          title="love letter"
          data-eid="467"
        >
          <span className="emojione emojione-1f48c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4a3"
          data-shortname=":bomb:"
          data-index="3"
          title="bomb"
          data-eid="530"
        >
          <span className="emojione emojione-1f4a3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f573"
          data-shortname=":hole:"
          data-index="4"
          title="hole"
          data-eid="1126"
        >
          <span className="emojione emojione-1f573"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6cd"
          data-shortname=":shopping_bags:"
          data-index="5"
          title="shopping bags"
          data-eid="1247"
        >
          <span className="emojione emojione-1f6cd"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4ff"
          data-shortname=":prayer_beads:"
          data-index="6"
          title="prayer beads"
          data-eid="2105"
        >
          <span className="emojione emojione-1f4ff"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f48e"
          data-shortname=":gem:"
          data-index="7"
          title="gem stone"
          data-eid="471"
        >
          <span className="emojione emojione-1f48e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f52a"
          data-shortname=":knife:"
          data-index="8"
          title="hocho"
          data-eid="566"
        >
          <span className="emojione emojione-1f52a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3fa"
          data-shortname=":amphora:"
          data-index="9"
          title="amphora"
          data-eid="2099"
        >
          <span className="emojione emojione-1f3fa"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5fa"
          data-shortname=":map:"
          data-index="10"
          title="world map"
          data-eid="1203"
        >
          <span className="emojione emojione-1f5fa"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f488"
          data-shortname=":barber:"
          data-index="11"
          title="barber pole"
          data-eid="459"
        >
          <span className="emojione emojione-1f488"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5bc"
          data-shortname=":frame_photo:"
          data-index="12"
          title="frame with picture"
          data-eid="1159"
        >
          <span className="emojione emojione-1f5bc"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6ce"
          data-shortname=":bellhop:"
          data-index="13"
          title="bellhop bell"
          data-eid="1248"
        >
          <span className="emojione emojione-1f6ce"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6aa"
          data-shortname=":door:"
          data-index="14"
          title="door"
          data-eid="710"
        >
          <span className="emojione emojione-1f6aa"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6cc"
          data-shortname=":sleeping_accommodation:"
          data-index="15"
          title="sleeping accommodation"
          data-eid="1209"
        >
          <span className="emojione emojione-1f6cc"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6cf"
          data-shortname=":bed:"
          data-index="16"
          title="bed"
          data-eid="1249"
        >
          <span className="emojione emojione-1f6cf"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6cb"
          data-shortname=":couch:"
          data-index="17"
          title="couch and lamp"
          data-eid="1246"
        >
          <span className="emojione emojione-1f6cb"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6bd"
          data-shortname=":toilet:"
          data-index="18"
          title="toilet"
          data-eid="720"
        >
          <span className="emojione emojione-1f6bd"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6bf"
          data-shortname=":shower:"
          data-index="19"
          title="shower"
          data-eid="782"
        >
          <span className="emojione emojione-1f6bf"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6c1"
          data-shortname=":bathtub:"
          data-index="20"
          title="bathtub"
          data-eid="783"
        >
          <span className="emojione emojione-1f6c1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="231b"
          data-shortname=":hourglass:"
          data-index="21"
          title="hourglass"
          data-eid="30"
        >
          <span className="emojione emojione-231b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23f3"
          data-shortname=":hourglass_flowing_sand:"
          data-index="22"
          title="hourglass with flowing sand"
          data-eid="36"
        >
          <span className="emojione emojione-23f3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="231a"
          data-shortname=":watch:"
          data-index="23"
          title="watch"
          data-eid="29"
        >
          <span className="emojione emojione-231a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23f0"
          data-shortname=":alarm_clock:"
          data-index="24"
          title="alarm clock"
          data-eid="35"
        >
          <span className="emojione emojione-23f0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23f1"
          data-shortname=":stopwatch:"
          data-index="25"
          title="stopwatch"
          data-eid="1643"
        >
          <span className="emojione emojione-23f1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="23f2"
          data-shortname=":timer:"
          data-index="26"
          title="timer clock"
          data-eid="1644"
        >
          <span className="emojione emojione-23f2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f570"
          data-shortname=":clock:"
          data-index="27"
          title="mantlepiece clock"
          data-eid="1123"
        >
          <span className="emojione emojione-1f570"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f321"
          data-shortname=":thermometer:"
          data-index="28"
          title="thermometer"
          data-eid="1093"
        >
          <span className="emojione emojione-1f321"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26f1"
          data-shortname=":beach_umbrella:"
          data-index="29"
          title="umbrella on ground"
          data-eid="1686"
        >
          <span className="emojione emojione-26f1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f388"
          data-shortname=":balloon:"
          data-index="30"
          title="balloon"
          data-eid="274"
        >
          <span className="emojione emojione-1f388"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f389"
          data-shortname=":tada:"
          data-index="31"
          title="party popper"
          data-eid="275"
        >
          <span className="emojione emojione-1f389"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f38a"
          data-shortname=":confetti_ball:"
          data-index="32"
          title="confetti ball"
          data-eid="276"
        >
          <span className="emojione emojione-1f38a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f38e"
          data-shortname=":dolls:"
          data-index="33"
          title="japanese dolls"
          data-eid="280"
        >
          <span className="emojione emojione-1f38e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f38f"
          data-shortname=":flags:"
          data-index="34"
          title="carp streamer"
          data-eid="281"
        >
          <span className="emojione emojione-1f38f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f390"
          data-shortname=":wind_chime:"
          data-index="35"
          title="wind chime"
          data-eid="282"
        >
          <span className="emojione emojione-1f390"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f380"
          data-shortname=":ribbon:"
          data-index="36"
          title="ribbon"
          data-eid="266"
        >
          <span className="emojione emojione-1f380"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f381"
          data-shortname=":gift:"
          data-index="37"
          title="wrapped present"
          data-eid="267"
        >
          <span className="emojione emojione-1f381"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f579"
          data-shortname=":joystick:"
          data-index="38"
          title="joystick"
          data-eid="1128"
        >
          <span className="emojione emojione-1f579"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4ef"
          data-shortname=":postal_horn:"
          data-index="39"
          title="postal horn"
          data-eid="833"
        >
          <span className="emojione emojione-1f4ef"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f399"
          data-shortname=":microphone2:"
          data-index="40"
          title="studio microphone"
          data-eid="1095"
        >
          <span className="emojione emojione-1f399"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f39a"
          data-shortname=":level_slider:"
          data-index="41"
          title="level slider"
          data-eid="1096"
        >
          <span className="emojione emojione-1f39a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f39b"
          data-shortname=":control_knobs:"
          data-index="42"
          title="control knobs"
          data-eid="1097"
        >
          <span className="emojione emojione-1f39b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4fb"
          data-shortname=":radio:"
          data-index="43"
          title="radio"
          data-eid="514"
        >
          <span className="emojione emojione-1f4fb"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4f1"
          data-shortname=":iphone:"
          data-index="44"
          title="mobile phone"
          data-eid="502"
        >
          <span className="emojione emojione-1f4f1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4f2"
          data-shortname=":calling:"
          data-index="45"
          title="mobile phone with rightwards arrow at left"
          data-eid="504"
        >
          <span className="emojione emojione-1f4f2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="260e"
          data-shortname=":telephone:"
          data-index="46"
          title="black telephone"
          data-eid="48"
        >
          <span className="emojione emojione-260e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4de"
          data-shortname=":telephone_receiver:"
          data-index="47"
          title="telephone receiver"
          data-eid="478"
        >
          <span className="emojione emojione-1f4de"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4df"
          data-shortname=":pager:"
          data-index="48"
          title="pager"
          data-eid="480"
        >
          <span className="emojione emojione-1f4df"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4e0"
          data-shortname=":fax:"
          data-index="49"
          title="fax machine"
          data-eid="481"
        >
          <span className="emojione emojione-1f4e0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f50b"
          data-shortname=":battery:"
          data-index="50"
          title="battery"
          data-eid="520"
        >
          <span className="emojione emojione-1f50b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f50c"
          data-shortname=":electric_plug:"
          data-index="51"
          title="electric plug"
          data-eid="522"
        >
          <span className="emojione emojione-1f50c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4bb"
          data-shortname=":computer:"
          data-index="52"
          title="personal computer"
          data-eid="590"
        >
          <span className="emojione emojione-1f4bb"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5a5"
          data-shortname=":desktop:"
          data-index="53"
          title="desktop computer"
          data-eid="1144"
        >
          <span className="emojione emojione-1f5a5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5a8"
          data-shortname=":printer:"
          data-index="54"
          title="printer"
          data-eid="1147"
        >
          <span className="emojione emojione-1f5a8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2328"
          data-shortname=":keyboard:"
          data-index="55"
          title="keyboard"
          data-eid="1152"
        >
          <span className="emojione emojione-2328"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5b1"
          data-shortname=":mouse_three_button:"
          data-index="56"
          title="three button mouse"
          data-eid="1696"
        >
          <span className="emojione emojione-1f5b1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5b2"
          data-shortname=":trackball:"
          data-index="57"
          title="trackball"
          data-eid="1154"
        >
          <span className="emojione emojione-1f5b2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4bd"
          data-shortname=":minidisc:"
          data-index="58"
          title="minidisc"
          data-eid="595"
        >
          <span className="emojione emojione-1f4bd"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4be"
          data-shortname=":floppy_disk:"
          data-index="59"
          title="floppy disk"
          data-eid="597"
        >
          <span className="emojione emojione-1f4be"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4bf"
          data-shortname=":cd:"
          data-index="60"
          title="optical disc"
          data-eid="599"
        >
          <span className="emojione emojione-1f4bf"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4c0"
          data-shortname=":dvd:"
          data-index="61"
          title="dvd"
          data-eid="601"
        >
          <span className="emojione emojione-1f4c0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3a5"
          data-shortname=":movie_camera:"
          data-index="62"
          title="movie camera"
          data-eid="291"
        >
          <span className="emojione emojione-1f3a5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f39e"
          data-shortname=":film_frames:"
          data-index="63"
          title="film frames"
          data-eid="1072"
        >
          <span className="emojione emojione-1f39e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4fd"
          data-shortname=":projector:"
          data-index="64"
          title="film projector"
          data-eid="1108"
        >
          <span className="emojione emojione-1f4fd"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4fa"
          data-shortname=":tv:"
          data-index="65"
          title="television"
          data-eid="513"
        >
          <span className="emojione emojione-1f4fa"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4f7"
          data-shortname=":camera:"
          data-index="66"
          title="camera"
          data-eid="510"
        >
          <span className="emojione emojione-1f4f7"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4f8"
          data-shortname=":camera_with_flash:"
          data-index="67"
          title="camera with flash"
          data-eid="1107"
        >
          <span className="emojione emojione-1f4f8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4f9"
          data-shortname=":video_camera:"
          data-index="68"
          title="video camera"
          data-eid="511"
        >
          <span className="emojione emojione-1f4f9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4fc"
          data-shortname=":vhs:"
          data-index="69"
          title="videocassette"
          data-eid="516"
        >
          <span className="emojione emojione-1f4fc"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f50d"
          data-shortname=":mag:"
          data-index="70"
          title="left-pointing magnifying glass"
          data-eid="523"
        >
          <span className="emojione emojione-1f50d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f50e"
          data-shortname=":mag_right:"
          data-index="71"
          title="right-pointing magnifying glass"
          data-eid="525"
        >
          <span className="emojione emojione-1f50e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f52c"
          data-shortname=":microscope:"
          data-index="72"
          title="microscope"
          data-eid="844"
        >
          <span className="emojione emojione-1f52c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f52d"
          data-shortname=":telescope:"
          data-index="73"
          title="telescope"
          data-eid="845"
        >
          <span className="emojione emojione-1f52d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4e1"
          data-shortname=":satellite:"
          data-index="74"
          title="satellite antenna"
          data-eid="483"
        >
          <span className="emojione emojione-1f4e1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f56f"
          data-shortname=":candle:"
          data-index="75"
          title="candle"
          data-eid="1122"
        >
          <span className="emojione emojione-1f56f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4a1"
          data-shortname=":bulb:"
          data-index="76"
          title="electric light bulb"
          data-eid="524"
        >
          <span className="emojione emojione-1f4a1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f526"
          data-shortname=":flashlight:"
          data-index="77"
          title="electric torch"
          data-eid="560"
        >
          <span className="emojione emojione-1f526"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3ee"
          data-shortname=":izakaya_lantern:"
          data-index="78"
          title="izakaya lantern"
          data-eid="339"
        >
          <span className="emojione emojione-1f3ee"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4d4"
          data-shortname=":notebook_with_decorative_cover:"
          data-index="79"
          title="notebook with decorative cover"
          data-eid="458"
        >
          <span className="emojione emojione-1f4d4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4d5"
          data-shortname=":closed_book:"
          data-index="80"
          title="closed book"
          data-eid="460"
        >
          <span className="emojione emojione-1f4d5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4d6"
          data-shortname=":book:"
          data-index="81"
          title="open book"
          data-eid="462"
        >
          <span className="emojione emojione-1f4d6"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4d7"
          data-shortname=":green_book:"
          data-index="82"
          title="green book"
          data-eid="464"
        >
          <span className="emojione emojione-1f4d7"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4d8"
          data-shortname=":blue_book:"
          data-index="83"
          title="blue book"
          data-eid="466"
        >
          <span className="emojione emojione-1f4d8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4d9"
          data-shortname=":orange_book:"
          data-index="84"
          title="orange book"
          data-eid="468"
        >
          <span className="emojione emojione-1f4d9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4da"
          data-shortname=":books:"
          data-index="85"
          title="books"
          data-eid="470"
        >
          <span className="emojione emojione-1f4da"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4d3"
          data-shortname=":notebook:"
          data-index="86"
          title="notebook"
          data-eid="456"
        >
          <span className="emojione emojione-1f4d3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4d2"
          data-shortname=":ledger:"
          data-index="87"
          title="ledger"
          data-eid="454"
        >
          <span className="emojione emojione-1f4d2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4c3"
          data-shortname=":page_with_curl:"
          data-index="88"
          title="page with curl"
          data-eid="610"
        >
          <span className="emojione emojione-1f4c3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4dc"
          data-shortname=":scroll:"
          data-index="89"
          title="scroll"
          data-eid="474"
        >
          <span className="emojione emojione-1f4dc"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4c4"
          data-shortname=":page_facing_up:"
          data-index="90"
          title="page facing up"
          data-eid="613"
        >
          <span className="emojione emojione-1f4c4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4f0"
          data-shortname=":newspaper:"
          data-index="91"
          title="newspaper"
          data-eid="501"
        >
          <span className="emojione emojione-1f4f0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5de"
          data-shortname=":newspaper2:"
          data-index="92"
          title="rolled-up newspaper"
          data-eid="1182"
        >
          <span className="emojione emojione-1f5de"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4d1"
          data-shortname=":bookmark_tabs:"
          data-index="93"
          title="bookmark tabs"
          data-eid="651"
        >
          <span className="emojione emojione-1f4d1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f516"
          data-shortname=":bookmark:"
          data-index="94"
          title="bookmark"
          data-eid="535"
        >
          <span className="emojione emojione-1f516"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3f7"
          data-shortname=":label:"
          data-index="95"
          title="label"
          data-eid="1106"
        >
          <span className="emojione emojione-1f3f7"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4b0"
          data-shortname=":moneybag:"
          data-index="96"
          title="money bag"
          data-eid="565"
        >
          <span className="emojione emojione-1f4b0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4b4"
          data-shortname=":yen:"
          data-index="97"
          title="banknote with yen sign"
          data-eid="575"
        >
          <span className="emojione emojione-1f4b4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4b5"
          data-shortname=":dollar:"
          data-index="98"
          title="banknote with dollar sign"
          data-eid="578"
        >
          <span className="emojione emojione-1f4b5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4b6"
          data-shortname=":euro:"
          data-index="99"
          title="banknote with euro sign"
          data-eid="829"
        >
          <span className="emojione emojione-1f4b6"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4b7"
          data-shortname=":pound:"
          data-index="100"
          title="banknote with pound sign"
          data-eid="830"
        >
          <span className="emojione emojione-1f4b7"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4b8"
          data-shortname=":money_with_wings:"
          data-index="101"
          title="money with wings"
          data-eid="581"
        >
          <span className="emojione emojione-1f4b8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4b3"
          data-shortname=":credit_card:"
          data-index="102"
          title="credit card"
          data-eid="572"
        >
          <span className="emojione emojione-1f4b3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2709"
          data-shortname=":envelope:"
          data-index="103"
          title="envelope"
          data-eid="93"
        >
          <span className="emojione emojione-2709"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4e7"
          data-shortname=":e-mail:"
          data-index="104"
          title="e-mail symbol"
          data-eid="492"
        >
          <span className="emojione emojione-1f4e7"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4e8"
          data-shortname=":incoming_envelope:"
          data-index="105"
          title="incoming envelope"
          data-eid="493"
        >
          <span className="emojione emojione-1f4e8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4e9"
          data-shortname=":envelope_with_arrow:"
          data-index="106"
          title="envelope with downwards arrow above"
          data-eid="495"
        >
          <span className="emojione emojione-1f4e9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4e4"
          data-shortname=":outbox_tray:"
          data-index="107"
          title="outbox tray"
          data-eid="487"
        >
          <span className="emojione emojione-1f4e4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4e5"
          data-shortname=":inbox_tray:"
          data-index="108"
          title="inbox tray"
          data-eid="489"
        >
          <span className="emojione emojione-1f4e5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4e6"
          data-shortname=":package:"
          data-index="109"
          title="package"
          data-eid="490"
        >
          <span className="emojione emojione-1f4e6"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4eb"
          data-shortname=":mailbox:"
          data-index="110"
          title="closed mailbox with raised flag"
          data-eid="498"
        >
          <span className="emojione emojione-1f4eb"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4ea"
          data-shortname=":mailbox_closed:"
          data-index="111"
          title="closed mailbox with lowered flag"
          data-eid="496"
        >
          <span className="emojione emojione-1f4ea"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4ec"
          data-shortname=":mailbox_with_mail:"
          data-index="112"
          title="open mailbox with raised flag"
          data-eid="831"
        >
          <span className="emojione emojione-1f4ec"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4ed"
          data-shortname=":mailbox_with_no_mail:"
          data-index="113"
          title="open mailbox with lowered flag"
          data-eid="832"
        >
          <span className="emojione emojione-1f4ed"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4ee"
          data-shortname=":postbox:"
          data-index="114"
          title="postbox"
          data-eid="499"
        >
          <span className="emojione emojione-1f4ee"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5f3"
          data-shortname=":ballot_box:"
          data-index="115"
          title="ballot box with ballot"
          data-eid="1198"
        >
          <span className="emojione emojione-1f5f3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="270f"
          data-shortname=":pencil2:"
          data-index="116"
          title="pencil"
          data-eid="97"
        >
          <span className="emojione emojione-270f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2712"
          data-shortname=":black_nib:"
          data-index="117"
          title="black nib"
          data-eid="98"
        >
          <span className="emojione emojione-2712"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f58b"
          data-shortname=":pen_fountain:"
          data-index="118"
          title="lower left fountain pen"
          data-eid="1141"
        >
          <span className="emojione emojione-1f58b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f58a"
          data-shortname=":pen_ballpoint:"
          data-index="119"
          title="lower left ballpoint pen"
          data-eid="1140"
        >
          <span className="emojione emojione-1f58a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f58c"
          data-shortname=":paintbrush:"
          data-index="120"
          title="lower left paintbrush"
          data-eid="1142"
        >
          <span className="emojione emojione-1f58c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f58d"
          data-shortname=":crayon:"
          data-index="121"
          title="lower left crayon"
          data-eid="1143"
        >
          <span className="emojione emojione-1f58d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4dd"
          data-shortname=":pencil:"
          data-index="122"
          title="memo"
          data-eid="476"
        >
          <span className="emojione emojione-1f4dd"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4c1"
          data-shortname=":file_folder:"
          data-index="123"
          title="file folder"
          data-eid="604"
        >
          <span className="emojione emojione-1f4c1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4c2"
          data-shortname=":open_file_folder:"
          data-index="124"
          title="open file folder"
          data-eid="607"
        >
          <span className="emojione emojione-1f4c2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5c2"
          data-shortname=":dividers:"
          data-index="125"
          title="card index dividers"
          data-eid="1164"
        >
          <span className="emojione emojione-1f5c2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4c5"
          data-shortname=":date:"
          data-index="126"
          title="calendar"
          data-eid="616"
        >
          <span className="emojione emojione-1f4c5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4c6"
          data-shortname=":calendar:"
          data-index="127"
          title="tear-off calendar"
          data-eid="619"
        >
          <span className="emojione emojione-1f4c6"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5d2"
          data-shortname=":notepad_spiral:"
          data-index="128"
          title="spiral note pad"
          data-eid="1175"
        >
          <span className="emojione emojione-1f5d2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5d3"
          data-shortname=":calendar_spiral:"
          data-index="129"
          title="spiral calendar pad"
          data-eid="1176"
        >
          <span className="emojione emojione-1f5d3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4c7"
          data-shortname=":card_index:"
          data-index="130"
          title="card index"
          data-eid="448"
        >
          <span className="emojione emojione-1f4c7"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4c8"
          data-shortname=":chart_with_upwards_trend:"
          data-index="131"
          title="chart with upwards trend"
          data-eid="624"
        >
          <span className="emojione emojione-1f4c8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4c9"
          data-shortname=":chart_with_downwards_trend:"
          data-index="132"
          title="chart with downwards trend"
          data-eid="627"
        >
          <span className="emojione emojione-1f4c9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4ca"
          data-shortname=":bar_chart:"
          data-index="133"
          title="bar chart"
          data-eid="630"
        >
          <span className="emojione emojione-1f4ca"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4cb"
          data-shortname=":clipboard:"
          data-index="134"
          title="clipboard"
          data-eid="633"
        >
          <span className="emojione emojione-1f4cb"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4cc"
          data-shortname=":pushpin:"
          data-index="135"
          title="pushpin"
          data-eid="636"
        >
          <span className="emojione emojione-1f4cc"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4cd"
          data-shortname=":round_pushpin:"
          data-index="136"
          title="round pushpin"
          data-eid="639"
        >
          <span className="emojione emojione-1f4cd"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4ce"
          data-shortname=":paperclip:"
          data-index="137"
          title="paperclip"
          data-eid="642"
        >
          <span className="emojione emojione-1f4ce"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f587"
          data-shortname=":paperclips:"
          data-index="138"
          title="linked paperclips"
          data-eid="1137"
        >
          <span className="emojione emojione-1f587"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4cf"
          data-shortname=":straight_ruler:"
          data-index="139"
          title="straight ruler"
          data-eid="645"
        >
          <span className="emojione emojione-1f4cf"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4d0"
          data-shortname=":triangular_ruler:"
          data-index="140"
          title="triangular ruler"
          data-eid="648"
        >
          <span className="emojione emojione-1f4d0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2702"
          data-shortname=":scissors:"
          data-index="141"
          title="black scissors"
          data-eid="90"
        >
          <span className="emojione emojione-2702"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5c3"
          data-shortname=":card_box:"
          data-index="142"
          title="card file box"
          data-eid="1165"
        >
          <span className="emojione emojione-1f5c3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5c4"
          data-shortname=":file_cabinet:"
          data-index="143"
          title="file cabinet"
          data-eid="1166"
        >
          <span className="emojione emojione-1f5c4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5d1"
          data-shortname=":wastebasket:"
          data-index="144"
          title="wastebasket"
          data-eid="1174"
        >
          <span className="emojione emojione-1f5d1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f512"
          data-shortname=":lock:"
          data-index="145"
          title="lock"
          data-eid="531"
        >
          <span className="emojione emojione-1f512"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f513"
          data-shortname=":unlock:"
          data-index="146"
          title="open lock"
          data-eid="532"
        >
          <span className="emojione emojione-1f513"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f50f"
          data-shortname=":lock_with_ink_pen:"
          data-index="147"
          title="lock with ink pen"
          data-eid="526"
        >
          <span className="emojione emojione-1f50f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f510"
          data-shortname=":closed_lock_with_key:"
          data-index="148"
          title="closed lock with key"
          data-eid="528"
        >
          <span className="emojione emojione-1f510"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f511"
          data-shortname=":key:"
          data-index="149"
          title="key"
          data-eid="529"
        >
          <span className="emojione emojione-1f511"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5dd"
          data-shortname=":key2:"
          data-index="150"
          title="old key"
          data-eid="1181"
        >
          <span className="emojione emojione-1f5dd"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f528"
          data-shortname=":hammer:"
          data-index="151"
          title="hammer"
          data-eid="563"
        >
          <span className="emojione emojione-1f528"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26cf"
          data-shortname=":pick:"
          data-index="152"
          title="pick"
          data-eid="1681"
        >
          <span className="emojione emojione-26cf"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2692"
          data-shortname=":hammer_pick:"
          data-index="153"
          title="hammer and pick"
          data-eid="1671"
        >
          <span className="emojione emojione-2692"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6e0"
          data-shortname=":tools:"
          data-index="154"
          title="hammer and wrench"
          data-eid="1210"
        >
          <span className="emojione emojione-1f6e0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5e1"
          data-shortname=":dagger:"
          data-index="155"
          title="dagger knife"
          data-eid="1184"
        >
          <span className="emojione emojione-1f5e1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2694"
          data-shortname=":crossed_swords:"
          data-index="156"
          title="crossed swords"
          data-eid="1672"
        >
          <span className="emojione emojione-2694"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f52b"
          data-shortname=":gun:"
          data-index="157"
          title="pistol"
          data-eid="567"
        >
          <span className="emojione emojione-1f52b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6e1"
          data-shortname=":shield:"
          data-index="158"
          title="shield"
          data-eid="1211"
        >
          <span className="emojione emojione-1f6e1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f527"
          data-shortname=":wrench:"
          data-index="159"
          title="wrench"
          data-eid="561"
        >
          <span className="emojione emojione-1f527"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f529"
          data-shortname=":nut_and_bolt:"
          data-index="160"
          title="nut and bolt"
          data-eid="564"
        >
          <span className="emojione emojione-1f529"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2699"
          data-shortname=":gear:"
          data-index="161"
          title="gear"
          data-eid="1675"
        >
          <span className="emojione emojione-2699"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5dc"
          data-shortname=":compression:"
          data-index="162"
          title="compression"
          data-eid="1180"
        >
          <span className="emojione emojione-1f5dc"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2697"
          data-shortname=":alembic:"
          data-index="163"
          title="alembic"
          data-eid="1674"
        >
          <span className="emojione emojione-2697"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2696"
          data-shortname=":scales:"
          data-index="164"
          title="scales"
          data-eid="1673"
        >
          <span className="emojione emojione-2696"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f517"
          data-shortname=":link:"
          data-index="165"
          title="link symbol"
          data-eid="537"
        >
          <span className="emojione emojione-1f517"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26d3"
          data-shortname=":chains:"
          data-index="166"
          title="chains"
          data-eid="1683"
        >
          <span className="emojione emojione-26d3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f489"
          data-shortname=":syringe:"
          data-index="167"
          title="syringe"
          data-eid="461"
        >
          <span className="emojione emojione-1f489"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f48a"
          data-shortname=":pill:"
          data-index="168"
          title="pill"
          data-eid="463"
        >
          <span className="emojione emojione-1f48a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6ac"
          data-shortname=":smoking:"
          data-index="169"
          title="smoking symbol"
          data-eid="712"
        >
          <span className="emojione emojione-1f6ac"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26b0"
          data-shortname=":coffin:"
          data-index="170"
          title="coffin"
          data-eid="1678"
        >
          <span className="emojione emojione-26b0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26b1"
          data-shortname=":urn:"
          data-index="171"
          title="funeral urn"
          data-eid="1679"
        >
          <span className="emojione emojione-26b1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5ff"
          data-shortname=":moyai:"
          data-index="172"
          title="moyai"
          data-eid="620"
        >
          <span className="emojione emojione-1f5ff"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6e2"
          data-shortname=":oil:"
          data-index="173"
          title="oil drum"
          data-eid="1212"
        >
          <span className="emojione emojione-1f6e2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f52e"
          data-shortname=":crystal_ball:"
          data-index="174"
          title="crystal ball"
          data-eid="569"
        >
          <span className="emojione emojione-1f52e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6d2"
          data-shortname=":shopping_cart:"
          data-index="175"
          title="shopping trolley"
          data-eid="2301"
        >
          <span className="emojione emojione-1f6d2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6a9"
          data-shortname=":triangular_flag_on_post:"
          data-index="176"
          title="triangular flag on post"
          data-eid="709"
        >
          <span className="emojione emojione-1f6a9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f38c"
          data-shortname=":crossed_flags:"
          data-index="177"
          title="crossed flags"
          data-eid="278"
        >
          <span className="emojione emojione-1f38c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3f4"
          data-shortname=":flag_black:"
          data-index="178"
          title="waving black flag"
          data-eid="1103"
        >
          <span className="emojione emojione-1f3f4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3f3"
          data-shortname=":flag_white:"
          data-index="179"
          title="waving white flag"
          data-eid="1102"
        >
          <span className="emojione emojione-1f3f3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3f3-1f308"
          data-shortname=":rainbow_flag:"
          data-index="180"
          title="rainbow_flag"
          data-eid="2157"
        >
          <span className="emojione emojione-1f3f3-1f308"></span>
        </span>
      </div>
    </div>
  );
};