Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";
export const EmojiNature = (props) => {
  // props destructuring
  const { onClickEmoji, hidden } = props;
  return (
    <div
      className="smiley-panel-body"
      style={{ display: hidden ? "block" : "none" }}
    >
      <div className="emoji-nature">
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f648"
          data-shortname=":see_no_evil:"
          data-index="1"
          title="see-no-evil monkey"
          data-eid="681"
        >
          <span className="emojione emojione-1f648"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f649"
          data-shortname=":hear_no_evil:"
          data-index="2"
          title="hear-no-evil monkey"
          data-eid="682"
        >
          <span className="emojione emojione-1f649"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f64a"
          data-shortname=":speak_no_evil:"
          data-index="3"
          title="speak-no-evil monkey"
          data-eid="683"
        >
          <span className="emojione emojione-1f64a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4a6"
          data-shortname=":sweat_drops:"
          data-index="4"
          title="splashing sweat symbol"
          data-eid="539"
        >
          <span className="emojione emojione-1f4a6"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4a8"
          data-shortname=":dash:"
          data-index="5"
          title="dash symbol"
          data-eid="545"
        >
          <span className="emojione emojione-1f4a8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f435"
          data-shortname=":monkey_face:"
          data-index="6"
          title="monkey face"
          data-eid="377"
        >
          <span className="emojione emojione-1f435"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f412"
          data-shortname=":monkey:"
          data-index="7"
          title="monkey"
          data-eid="346"
        >
          <span className="emojione emojione-1f412"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f98d"
          data-shortname=":gorilla:"
          data-index="8"
          title="gorilla"
          data-eid="2283"
        >
          <span className="emojione emojione-1f98d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f436"
          data-shortname=":dog:"
          data-index="9"
          title="dog face"
          data-eid="378"
        >
          <span className="emojione emojione-1f436"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f415"
          data-shortname=":dog2:"
          data-index="10"
          title="dog"
          data-eid="822"
        >
          <span className="emojione emojione-1f415"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f429"
          data-shortname=":poodle:"
          data-index="11"
          title="poodle"
          data-eid="366"
        >
          <span className="emojione emojione-1f429"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f43a"
          data-shortname=":wolf:"
          data-index="12"
          title="wolf face"
          data-eid="382"
        >
          <span className="emojione emojione-1f43a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f98a"
          data-shortname=":fox:"
          data-index="13"
          title="fox face"
          data-eid="2280"
        >
          <span className="emojione emojione-1f98a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f431"
          data-shortname=":cat:"
          data-index="14"
          title="cat face"
          data-eid="373"
        >
          <span className="emojione emojione-1f431"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f408"
          data-shortname=":cat2:"
          data-index="15"
          title="cat"
          data-eid="815"
        >
          <span className="emojione emojione-1f408"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f981"
          data-shortname=":lion_face:"
          data-index="16"
          title="lion face"
          data-eid="2086"
        >
          <span className="emojione emojione-1f981"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f42f"
          data-shortname=":tiger:"
          data-index="17"
          title="tiger face"
          data-eid="371"
        >
          <span className="emojione emojione-1f42f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f405"
          data-shortname=":tiger2:"
          data-index="18"
          title="tiger"
          data-eid="812"
        >
          <span className="emojione emojione-1f405"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f406"
          data-shortname=":leopard:"
          data-index="19"
          title="leopard"
          data-eid="813"
        >
          <span className="emojione emojione-1f406"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f434"
          data-shortname=":horse:"
          data-index="20"
          title="horse face"
          data-eid="376"
        >
          <span className="emojione emojione-1f434"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f40e"
          data-shortname=":racehorse:"
          data-index="21"
          title="horse"
          data-eid="344"
        >
          <span className="emojione emojione-1f40e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f98c"
          data-shortname=":deer:"
          data-index="22"
          title="deer"
          data-eid="2282"
        >
          <span className="emojione emojione-1f98c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f984"
          data-shortname=":unicorn:"
          data-index="23"
          title="unicorn face"
          data-eid="2088"
        >
          <span className="emojione emojione-1f984"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f42e"
          data-shortname=":cow:"
          data-index="24"
          title="cow face"
          data-eid="370"
        >
          <span className="emojione emojione-1f42e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f402"
          data-shortname=":ox:"
          data-index="25"
          title="ox"
          data-eid="809"
        >
          <span className="emojione emojione-1f402"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f403"
          data-shortname=":water_buffalo:"
          data-index="26"
          title="water buffalo"
          data-eid="810"
        >
          <span className="emojione emojione-1f403"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f404"
          data-shortname=":cow2:"
          data-index="27"
          title="cow"
          data-eid="811"
        >
          <span className="emojione emojione-1f404"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f437"
          data-shortname=":pig:"
          data-index="28"
          title="pig face"
          data-eid="379"
        >
          <span className="emojione emojione-1f437"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f416"
          data-shortname=":pig2:"
          data-index="29"
          title="pig"
          data-eid="823"
        >
          <span className="emojione emojione-1f416"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f417"
          data-shortname=":boar:"
          data-index="30"
          title="boar"
          data-eid="348"
        >
          <span className="emojione emojione-1f417"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f43d"
          data-shortname=":pig_nose:"
          data-index="31"
          title="pig nose"
          data-eid="385"
        >
          <span className="emojione emojione-1f43d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f40f"
          data-shortname=":ram:"
          data-index="32"
          title="ram"
          data-eid="819"
        >
          <span className="emojione emojione-1f40f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f411"
          data-shortname=":sheep:"
          data-index="33"
          title="sheep"
          data-eid="345"
        >
          <span className="emojione emojione-1f411"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f410"
          data-shortname=":goat:"
          data-index="34"
          title="goat"
          data-eid="820"
        >
          <span className="emojione emojione-1f410"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f42a"
          data-shortname=":dromedary_camel:"
          data-index="35"
          title="dromedary camel"
          data-eid="824"
        >
          <span className="emojione emojione-1f42a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f42b"
          data-shortname=":camel:"
          data-index="36"
          title="bactrian camel"
          data-eid="367"
        >
          <span className="emojione emojione-1f42b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f418"
          data-shortname=":elephant:"
          data-index="37"
          title="elephant"
          data-eid="349"
        >
          <span className="emojione emojione-1f418"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f98f"
          data-shortname=":rhino:"
          data-index="38"
          title="rhinoceros"
          data-eid="2285"
        >
          <span className="emojione emojione-1f98f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f42d"
          data-shortname=":mouse:"
          data-index="39"
          title="mouse face"
          data-eid="369"
        >
          <span className="emojione emojione-1f42d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f401"
          data-shortname=":mouse2:"
          data-index="40"
          title="mouse"
          data-eid="808"
        >
          <span className="emojione emojione-1f401"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f400"
          data-shortname=":rat:"
          data-index="41"
          title="rat"
          data-eid="807"
        >
          <span className="emojione emojione-1f400"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f439"
          data-shortname=":hamster:"
          data-index="42"
          title="hamster face"
          data-eid="381"
        >
          <span className="emojione emojione-1f439"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f430"
          data-shortname=":rabbit:"
          data-index="43"
          title="rabbit face"
          data-eid="372"
        >
          <span className="emojione emojione-1f430"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f407"
          data-shortname=":rabbit2:"
          data-index="44"
          title="rabbit"
          data-eid="814"
        >
          <span className="emojione emojione-1f407"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f43f"
          data-shortname=":chipmunk:"
          data-index="45"
          title="chipmunk"
          data-eid="1090"
        >
          <span className="emojione emojione-1f43f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f987"
          data-shortname=":bat:"
          data-index="46"
          title="bat"
          data-eid="2277"
        >
          <span className="emojione emojione-1f987"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f43b"
          data-shortname=":bear:"
          data-index="47"
          title="bear face"
          data-eid="383"
        >
          <span className="emojione emojione-1f43b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f428"
          data-shortname=":koala:"
          data-index="48"
          title="koala"
          data-eid="365"
        >
          <span className="emojione emojione-1f428"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f43c"
          data-shortname=":panda_face:"
          data-index="49"
          title="panda face"
          data-eid="384"
        >
          <span className="emojione emojione-1f43c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f43e"
          data-shortname=":feet:"
          data-index="50"
          title="paw prints"
          data-eid="386"
        >
          <span className="emojione emojione-1f43e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f983"
          data-shortname=":turkey:"
          data-index="51"
          title="turkey"
          data-eid="2091"
        >
          <span className="emojione emojione-1f983"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f414"
          data-shortname=":chicken:"
          data-index="52"
          title="chicken"
          data-eid="347"
        >
          <span className="emojione emojione-1f414"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f413"
          data-shortname=":rooster:"
          data-index="53"
          title="rooster"
          data-eid="821"
        >
          <span className="emojione emojione-1f413"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f423"
          data-shortname=":hatching_chick:"
          data-index="54"
          title="hatching chick"
          data-eid="360"
        >
          <span className="emojione emojione-1f423"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f424"
          data-shortname=":baby_chick:"
          data-index="55"
          title="baby chick"
          data-eid="361"
        >
          <span className="emojione emojione-1f424"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f425"
          data-shortname=":hatched_chick:"
          data-index="56"
          title="front-facing baby chick"
          data-eid="362"
        >
          <span className="emojione emojione-1f425"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f426"
          data-shortname=":bird:"
          data-index="57"
          title="bird"
          data-eid="363"
        >
          <span className="emojione emojione-1f426"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f427"
          data-shortname=":penguin:"
          data-index="58"
          title="penguin"
          data-eid="364"
        >
          <span className="emojione emojione-1f427"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f54a"
          data-shortname=":dove:"
          data-index="59"
          title="dove of peace"
          data-eid="1114"
        >
          <span className="emojione emojione-1f54a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f985"
          data-shortname=":eagle:"
          data-index="60"
          title="eagle"
          data-eid="2275"
        >
          <span className="emojione emojione-1f985"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f986"
          data-shortname=":duck:"
          data-index="61"
          title="duck"
          data-eid="2276"
        >
          <span className="emojione emojione-1f986"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f989"
          data-shortname=":owl:"
          data-index="62"
          title="owl"
          data-eid="2279"
        >
          <span className="emojione emojione-1f989"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f438"
          data-shortname=":frog:"
          data-index="63"
          title="frog face"
          data-eid="380"
        >
          <span className="emojione emojione-1f438"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f40a"
          data-shortname=":crocodile:"
          data-index="64"
          title="crocodile"
          data-eid="817"
        >
          <span className="emojione emojione-1f40a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f422"
          data-shortname=":turtle:"
          data-index="65"
          title="turtle"
          data-eid="359"
        >
          <span className="emojione emojione-1f422"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f98e"
          data-shortname=":lizard:"
          data-index="66"
          title="lizard"
          data-eid="2284"
        >
          <span className="emojione emojione-1f98e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f40d"
          data-shortname=":snake:"
          data-index="67"
          title="snake"
          data-eid="343"
        >
          <span className="emojione emojione-1f40d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f432"
          data-shortname=":dragon_face:"
          data-index="68"
          title="dragon face"
          data-eid="374"
        >
          <span className="emojione emojione-1f432"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f409"
          data-shortname=":dragon:"
          data-index="69"
          title="dragon"
          data-eid="816"
        >
          <span className="emojione emojione-1f409"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f433"
          data-shortname=":whale:"
          data-index="70"
          title="spouting whale"
          data-eid="375"
        >
          <span className="emojione emojione-1f433"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f40b"
          data-shortname=":whale2:"
          data-index="71"
          title="whale"
          data-eid="818"
        >
          <span className="emojione emojione-1f40b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f42c"
          data-shortname=":dolphin:"
          data-index="72"
          title="dolphin"
          data-eid="368"
        >
          <span className="emojione emojione-1f42c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f41f"
          data-shortname=":fish:"
          data-index="73"
          title="fish"
          data-eid="356"
        >
          <span className="emojione emojione-1f41f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f420"
          data-shortname=":tropical_fish:"
          data-index="74"
          title="tropical fish"
          data-eid="357"
        >
          <span className="emojione emojione-1f420"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f421"
          data-shortname=":blowfish:"
          data-index="75"
          title="blowfish"
          data-eid="358"
        >
          <span className="emojione emojione-1f421"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f988"
          data-shortname=":shark:"
          data-index="76"
          title="shark"
          data-eid="2278"
        >
          <span className="emojione emojione-1f988"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f419"
          data-shortname=":octopus:"
          data-index="77"
          title="octopus"
          data-eid="350"
        >
          <span className="emojione emojione-1f419"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f41a"
          data-shortname=":shell:"
          data-index="78"
          title="spiral shell"
          data-eid="351"
        >
          <span className="emojione emojione-1f41a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f980"
          data-shortname=":crab:"
          data-index="79"
          title="crab"
          data-eid="2090"
        >
          <span className="emojione emojione-1f980"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f990"
          data-shortname=":shrimp:"
          data-index="80"
          title="shrimp"
          data-eid="2318"
        >
          <span className="emojione emojione-1f990"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f991"
          data-shortname=":squid:"
          data-index="81"
          title="squid"
          data-eid="2319"
        >
          <span className="emojione emojione-1f991"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f98b"
          data-shortname=":butterfly:"
          data-index="82"
          title="butterfly"
          data-eid="2281"
        >
          <span className="emojione emojione-1f98b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f40c"
          data-shortname=":snail:"
          data-index="83"
          title="snail"
          data-eid="342"
        >
          <span className="emojione emojione-1f40c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f41b"
          data-shortname=":bug:"
          data-index="84"
          title="bug"
          data-eid="352"
        >
          <span className="emojione emojione-1f41b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f41c"
          data-shortname=":ant:"
          data-index="85"
          title="ant"
          data-eid="353"
        >
          <span className="emojione emojione-1f41c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f41d"
          data-shortname=":bee:"
          data-index="86"
          title="honeybee"
          data-eid="354"
        >
          <span className="emojione emojione-1f41d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f41e"
          data-shortname=":beetle:"
          data-index="87"
          title="lady beetle"
          data-eid="355"
        >
          <span className="emojione emojione-1f41e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f577"
          data-shortname=":spider:"
          data-index="88"
          title="spider"
          data-eid="1091"
        >
          <span className="emojione emojione-1f577"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f578"
          data-shortname=":spider_web:"
          data-index="89"
          title="spider web"
          data-eid="1092"
        >
          <span className="emojione emojione-1f578"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f982"
          data-shortname=":scorpion:"
          data-index="90"
          title="scorpion"
          data-eid="2089"
        >
          <span className="emojione emojione-1f982"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f490"
          data-shortname=":bouquet:"
          data-index="91"
          title="bouquet"
          data-eid="475"
        >
          <span className="emojione emojione-1f490"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f338"
          data-shortname=":cherry_blossom:"
          data-index="92"
          title="cherry blossom"
          data-eid="200"
        >
          <span className="emojione emojione-1f338"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3f5"
          data-shortname=":rosette:"
          data-index="93"
          title="rosette"
          data-eid="1104"
        >
          <span className="emojione emojione-1f3f5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f339"
          data-shortname=":rose:"
          data-index="94"
          title="rose"
          data-eid="201"
        >
          <span className="emojione emojione-1f339"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f940"
          data-shortname=":wilted_rose:"
          data-index="95"
          title="wilted flower"
          data-eid="2286"
        >
          <span className="emojione emojione-1f940"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f33a"
          data-shortname=":hibiscus:"
          data-index="96"
          title="hibiscus"
          data-eid="202"
        >
          <span className="emojione emojione-1f33a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f33b"
          data-shortname=":sunflower:"
          data-index="97"
          title="sunflower"
          data-eid="203"
        >
          <span className="emojione emojione-1f33b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f33c"
          data-shortname=":blossom:"
          data-index="98"
          title="blossom"
          data-eid="204"
        >
          <span className="emojione emojione-1f33c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f337"
          data-shortname=":tulip:"
          data-index="99"
          title="tulip"
          data-eid="199"
        >
          <span className="emojione emojione-1f337"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f331"
          data-shortname=":seedling:"
          data-index="100"
          title="seedling"
          data-eid="196"
        >
          <span className="emojione emojione-1f331"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f332"
          data-shortname=":evergreen_tree:"
          data-index="101"
          title="evergreen tree"
          data-eid="799"
        >
          <span className="emojione emojione-1f332"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f333"
          data-shortname=":deciduous_tree:"
          data-index="102"
          title="deciduous tree"
          data-eid="800"
        >
          <span className="emojione emojione-1f333"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f334"
          data-shortname=":palm_tree:"
          data-index="103"
          title="palm tree"
          data-eid="197"
        >
          <span className="emojione emojione-1f334"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f335"
          data-shortname=":cactus:"
          data-index="104"
          title="cactus"
          data-eid="198"
        >
          <span className="emojione emojione-1f335"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f33e"
          data-shortname=":ear_of_rice:"
          data-index="105"
          title="ear of rice"
          data-eid="206"
        >
          <span className="emojione emojione-1f33e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f33f"
          data-shortname=":herb:"
          data-index="106"
          title="herb"
          data-eid="207"
        >
          <span className="emojione emojione-1f33f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2618"
          data-shortname=":shamrock:"
          data-index="107"
          title="shamrock"
          data-eid="1651"
        >
          <span className="emojione emojione-2618"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f340"
          data-shortname=":four_leaf_clover:"
          data-index="108"
          title="four leaf clover"
          data-eid="208"
        >
          <span className="emojione emojione-1f340"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f341"
          data-shortname=":maple_leaf:"
          data-index="109"
          title="maple leaf"
          data-eid="209"
        >
          <span className="emojione emojione-1f341"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f342"
          data-shortname=":fallen_leaf:"
          data-index="110"
          title="fallen leaf"
          data-eid="210"
        >
          <span className="emojione emojione-1f342"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f343"
          data-shortname=":leaves:"
          data-index="111"
          title="leaf fluttering in wind"
          data-eid="211"
        >
          <span className="emojione emojione-1f343"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f344"
          data-shortname=":mushroom:"
          data-index="112"
          title="mushroom"
          data-eid="212"
        >
          <span className="emojione emojione-1f344"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f330"
          data-shortname=":chestnut:"
          data-index="113"
          title="chestnut"
          data-eid="195"
        >
          <span className="emojione emojione-1f330"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f30d"
          data-shortname=":earth_africa:"
          data-index="114"
          title="earth globe europe-africa"
          data-eid="788"
        >
          <span className="emojione emojione-1f30d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f30e"
          data-shortname=":earth_americas:"
          data-index="115"
          title="earth globe americas"
          data-eid="789"
        >
          <span className="emojione emojione-1f30e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f30f"
          data-shortname=":earth_asia:"
          data-index="116"
          title="earth globe asia-australia"
          data-eid="186"
        >
          <span className="emojione emojione-1f30f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f311"
          data-shortname=":new_moon:"
          data-index="117"
          title="new moon symbol"
          data-eid="187"
        >
          <span className="emojione emojione-1f311"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f312"
          data-shortname=":waxing_crescent_moon:"
          data-index="118"
          title="waxing crescent moon symbol"
          data-eid="791"
        >
          <span className="emojione emojione-1f312"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f313"
          data-shortname=":first_quarter_moon:"
          data-index="119"
          title="first quarter moon symbol"
          data-eid="188"
        >
          <span className="emojione emojione-1f313"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f314"
          data-shortname=":waxing_gibbous_moon:"
          data-index="120"
          title="waxing gibbous moon symbol"
          data-eid="189"
        >
          <span className="emojione emojione-1f314"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f315"
          data-shortname=":full_moon:"
          data-index="121"
          title="full moon symbol"
          data-eid="190"
        >
          <span className="emojione emojione-1f315"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f316"
          data-shortname=":waning_gibbous_moon:"
          data-index="122"
          title="waning gibbous moon symbol"
          data-eid="792"
        >
          <span className="emojione emojione-1f316"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f317"
          data-shortname=":last_quarter_moon:"
          data-index="123"
          title="last quarter moon symbol"
          data-eid="793"
        >
          <span className="emojione emojione-1f317"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f318"
          data-shortname=":waning_crescent_moon:"
          data-index="124"
          title="waning crescent moon symbol"
          data-eid="794"
        >
          <span className="emojione emojione-1f318"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f319"
          data-shortname=":crescent_moon:"
          data-index="125"
          title="crescent moon"
          data-eid="191"
        >
          <span className="emojione emojione-1f319"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f31a"
          data-shortname=":new_moon_with_face:"
          data-index="126"
          title="new moon with face"
          data-eid="795"
        >
          <span className="emojione emojione-1f31a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f31b"
          data-shortname=":first_quarter_moon_with_face:"
          data-index="127"
          title="first quarter moon with face"
          data-eid="192"
        >
          <span className="emojione emojione-1f31b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f31c"
          data-shortname=":last_quarter_moon_with_face:"
          data-index="128"
          title="last quarter moon with face"
          data-eid="796"
        >
          <span className="emojione emojione-1f31c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2600"
          data-shortname=":sunny:"
          data-index="129"
          title="black sun with rays"
          data-eid="46"
        >
          <span className="emojione emojione-2600"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f31d"
          data-shortname=":full_moon_with_face:"
          data-index="130"
          title="full moon with face"
          data-eid="797"
        >
          <span className="emojione emojione-1f31d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f31e"
          data-shortname=":sun_with_face:"
          data-index="131"
          title="sun with face"
          data-eid="798"
        >
          <span className="emojione emojione-1f31e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2b50"
          data-shortname=":star:"
          data-index="132"
          title="white medium star"
          data-eid="125"
        >
          <span className="emojione emojione-2b50"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f31f"
          data-shortname=":star2:"
          data-index="133"
          title="glowing star"
          data-eid="193"
        >
          <span className="emojione emojione-1f31f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2601"
          data-shortname=":cloud:"
          data-index="134"
          title="cloud"
          data-eid="47"
        >
          <span className="emojione emojione-2601"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26c5"
          data-shortname=":partly_sunny:"
          data-index="135"
          title="sun behind cloud"
          data-eid="81"
        >
          <span className="emojione emojione-26c5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26c8"
          data-shortname=":thunder_cloud_rain:"
          data-index="136"
          title="thunder cloud and rain"
          data-eid="1680"
        >
          <span className="emojione emojione-26c8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f324"
          data-shortname=":white_sun_small_cloud:"
          data-index="137"
          title="white sun with small cloud"
          data-eid="1693"
        >
          <span className="emojione emojione-1f324"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f325"
          data-shortname=":white_sun_cloud:"
          data-index="138"
          title="white sun behind cloud"
          data-eid="1694"
        >
          <span className="emojione emojione-1f325"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f326"
          data-shortname=":white_sun_rain_cloud:"
          data-index="139"
          title="white sun behind cloud with rain"
          data-eid="1695"
        >
          <span className="emojione emojione-1f326"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f327"
          data-shortname=":cloud_rain:"
          data-index="140"
          title="cloud with rain"
          data-eid="1084"
        >
          <span className="emojione emojione-1f327"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f328"
          data-shortname=":cloud_snow:"
          data-index="141"
          title="cloud with snow"
          data-eid="1085"
        >
          <span className="emojione emojione-1f328"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f329"
          data-shortname=":cloud_lightning:"
          data-index="142"
          title="cloud with lightning"
          data-eid="1086"
        >
          <span className="emojione emojione-1f329"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f32a"
          data-shortname=":cloud_tornado:"
          data-index="143"
          title="cloud with tornado"
          data-eid="1087"
        >
          <span className="emojione emojione-1f32a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f32b"
          data-shortname=":fog:"
          data-index="144"
          title="fog"
          data-eid="1088"
        >
          <span className="emojione emojione-1f32b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f32c"
          data-shortname=":wind_blowing_face:"
          data-index="145"
          title="wind blowing face"
          data-eid="1089"
        >
          <span className="emojione emojione-1f32c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2602"
          data-shortname=":umbrella2:"
          data-index="146"
          title="umbrella"
          data-eid="1648"
        >
          <span className="emojione emojione-2602"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2614"
          data-shortname=":umbrella:"
          data-index="147"
          title="umbrella with rain drops"
          data-eid="50"
        >
          <span className="emojione emojione-2614"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26a1"
          data-shortname=":zap:"
          data-index="148"
          title="high voltage sign"
          data-eid="75"
        >
          <span className="emojione emojione-26a1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2744"
          data-shortname=":snowflake:"
          data-index="149"
          title="snowflake"
          data-eid="104"
        >
          <span className="emojione emojione-2744"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2603"
          data-shortname=":snowman2:"
          data-index="150"
          title="snowman"
          data-eid="1649"
        >
          <span className="emojione emojione-2603"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26c4"
          data-shortname=":snowman:"
          data-index="151"
          title="snowman without snow"
          data-eid="80"
        >
          <span className="emojione emojione-26c4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2604"
          data-shortname=":comet:"
          data-index="152"
          title="comet"
          data-eid="1650"
        >
          <span className="emojione emojione-2604"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f525"
          data-shortname=":fire:"
          data-index="153"
          title="fire"
          data-eid="558"
        >
          <span className="emojione emojione-1f525"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4a7"
          data-shortname=":droplet:"
          data-index="154"
          title="droplet"
          data-eid="542"
        >
          <span className="emojione emojione-1f4a7"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f30a"
          data-shortname=":ocean:"
          data-index="155"
          title="water wave"
          data-eid="183"
        >
          <span className="emojione emojione-1f30a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f383"
          data-shortname=":jack_o_lantern:"
          data-index="156"
          title="jack-o-lantern"
          data-eid="269"
        >
          <span className="emojione emojione-1f383"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f384"
          data-shortname=":christmas_tree:"
          data-index="157"
          title="christmas tree"
          data-eid="270"
        >
          <span className="emojione emojione-1f384"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2728"
          data-shortname=":sparkles:"
          data-index="158"
          title="sparkles"
          data-eid="101"
        >
          <span className="emojione emojione-2728"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f38b"
          data-shortname=":tanabata_tree:"
          data-index="159"
          title="tanabata tree"
          data-eid="277"
        >
          <span className="emojione emojione-1f38b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f38d"
          data-shortname=":bamboo:"
          data-index="160"
          title="pine decoration"
          data-eid="279"
        >
          <span className="emojione emojione-1f38d"></span>
        </span>
      </div>
    </div>
  );
};