Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";

export const EmojiTravel = (props) => {
  // props destructuring
  const { onClickEmoji, hidden } = props;
  return (
    <div
      className="smiley-panel-body"
      style={{ display: hidden ? "block" : "none" }}
    >
      <div className="emoji-travel">
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3ce"
          data-shortname=":race_car:"
          data-index="1"
          title="racing car"
          data-eid="1078"
        >
          <span className="emojione emojione-1f3ce"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3cd"
          data-shortname=":motorcycle:"
          data-index="2"
          title="racing motorcycle"
          data-eid="1077"
        >
          <span className="emojione emojione-1f3cd"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5fe"
          data-shortname=":japan:"
          data-index="3"
          title="silhouette of japan"
          data-eid="618"
        >
          <span className="emojione emojione-1f5fe"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3d4"
          data-shortname=":mountain_snow:"
          data-index="4"
          title="snow capped mountain"
          data-eid="1234"
        >
          <span className="emojione emojione-1f3d4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26f0"
          data-shortname=":mountain:"
          data-index="5"
          title="mountain"
          data-eid="1685"
        >
          <span className="emojione emojione-26f0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f30b"
          data-shortname=":volcano:"
          data-index="6"
          title="volcano"
          data-eid="184"
        >
          <span className="emojione emojione-1f30b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5fb"
          data-shortname=":mount_fuji:"
          data-index="7"
          title="mount fuji"
          data-eid="614"
        >
          <span className="emojione emojione-1f5fb"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3d5"
          data-shortname=":camping:"
          data-index="8"
          title="camping"
          data-eid="1235"
        >
          <span className="emojione emojione-1f3d5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3d6"
          data-shortname=":beach:"
          data-index="9"
          title="beach with umbrella"
          data-eid="1236"
        >
          <span className="emojione emojione-1f3d6"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3dc"
          data-shortname=":desert:"
          data-index="10"
          title="desert"
          data-eid="1242"
        >
          <span className="emojione emojione-1f3dc"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3dd"
          data-shortname=":island:"
          data-index="11"
          title="desert island"
          data-eid="1243"
        >
          <span className="emojione emojione-1f3dd"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3de"
          data-shortname=":park:"
          data-index="12"
          title="national park"
          data-eid="1244"
        >
          <span className="emojione emojione-1f3de"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3df"
          data-shortname=":stadium:"
          data-index="13"
          title="stadium"
          data-eid="1245"
        >
          <span className="emojione emojione-1f3df"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3db"
          data-shortname=":classical_building:"
          data-index="14"
          title="classical building"
          data-eid="1241"
        >
          <span className="emojione emojione-1f3db"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3d7"
          data-shortname=":construction_site:"
          data-index="15"
          title="building construction"
          data-eid="1237"
        >
          <span className="emojione emojione-1f3d7"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3d8"
          data-shortname=":homes:"
          data-index="16"
          title="house buildings"
          data-eid="1238"
        >
          <span className="emojione emojione-1f3d8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3d9"
          data-shortname=":cityscape:"
          data-index="17"
          title="cityscape"
          data-eid="1239"
        >
          <span className="emojione emojione-1f3d9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3da"
          data-shortname=":house_abandoned:"
          data-index="18"
          title="derelict house building"
          data-eid="1240"
        >
          <span className="emojione emojione-1f3da"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3e0"
          data-shortname=":house:"
          data-index="19"
          title="house building"
          data-eid="326"
        >
          <span className="emojione emojione-1f3e0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3e1"
          data-shortname=":house_with_garden:"
          data-index="20"
          title="house with garden"
          data-eid="327"
        >
          <span className="emojione emojione-1f3e1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3e2"
          data-shortname=":office:"
          data-index="21"
          title="office building"
          data-eid="328"
        >
          <span className="emojione emojione-1f3e2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3e3"
          data-shortname=":post_office:"
          data-index="22"
          title="japanese post office"
          data-eid="329"
        >
          <span className="emojione emojione-1f3e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3e4"
          data-shortname=":european_post_office:"
          data-index="23"
          title="european post office"
          data-eid="806"
        >
          <span className="emojione emojione-1f3e4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3e5"
          data-shortname=":hospital:"
          data-index="24"
          title="hospital"
          data-eid="330"
        >
          <span className="emojione emojione-1f3e5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3e6"
          data-shortname=":bank:"
          data-index="25"
          title="bank"
          data-eid="331"
        >
          <span className="emojione emojione-1f3e6"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3e8"
          data-shortname=":hotel:"
          data-index="26"
          title="hotel"
          data-eid="333"
        >
          <span className="emojione emojione-1f3e8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3e9"
          data-shortname=":love_hotel:"
          data-index="27"
          title="love hotel"
          data-eid="334"
        >
          <span className="emojione emojione-1f3e9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3ea"
          data-shortname=":convenience_store:"
          data-index="28"
          title="convenience store"
          data-eid="335"
        >
          <span className="emojione emojione-1f3ea"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3eb"
          data-shortname=":school:"
          data-index="29"
          title="school"
          data-eid="336"
        >
          <span className="emojione emojione-1f3eb"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3ec"
          data-shortname=":department_store:"
          data-index="30"
          title="department store"
          data-eid="337"
        >
          <span className="emojione emojione-1f3ec"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3ed"
          data-shortname=":factory:"
          data-index="31"
          title="factory"
          data-eid="338"
        >
          <span className="emojione emojione-1f3ed"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3ef"
          data-shortname=":japanese_castle:"
          data-index="32"
          title="japanese castle"
          data-eid="340"
        >
          <span className="emojione emojione-1f3ef"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3f0"
          data-shortname=":european_castle:"
          data-index="33"
          title="european castle"
          data-eid="341"
        >
          <span className="emojione emojione-1f3f0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f492"
          data-shortname=":wedding:"
          data-index="34"
          title="wedding"
          data-eid="479"
        >
          <span className="emojione emojione-1f492"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5fc"
          data-shortname=":tokyo_tower:"
          data-index="35"
          title="tokyo tower"
          data-eid="615"
        >
          <span className="emojione emojione-1f5fc"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f5fd"
          data-shortname=":statue_of_liberty:"
          data-index="36"
          title="statue of liberty"
          data-eid="617"
        >
          <span className="emojione emojione-1f5fd"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26ea"
          data-shortname=":church:"
          data-index="37"
          title="church"
          data-eid="84"
        >
          <span className="emojione emojione-26ea"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f54c"
          data-shortname=":mosque:"
          data-index="38"
          title="mosque"
          data-eid="2102"
        >
          <span className="emojione emojione-1f54c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f54d"
          data-shortname=":synagogue:"
          data-index="39"
          title="synagogue"
          data-eid="2103"
        >
          <span className="emojione emojione-1f54d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26e9"
          data-shortname=":shinto_shrine:"
          data-index="40"
          title="shinto shrine"
          data-eid="1684"
        >
          <span className="emojione emojione-26e9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f54b"
          data-shortname=":kaaba:"
          data-index="41"
          title="kaaba"
          data-eid="2101"
        >
          <span className="emojione emojione-1f54b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26f2"
          data-shortname=":fountain:"
          data-index="42"
          title="fountain"
          data-eid="85"
        >
          <span className="emojione emojione-26f2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26fa"
          data-shortname=":tent:"
          data-index="43"
          title="tent"
          data-eid="88"
        >
          <span className="emojione emojione-26fa"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f301"
          data-shortname=":foggy:"
          data-index="44"
          title="foggy"
          data-eid="174"
        >
          <span className="emojione emojione-1f301"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f303"
          data-shortname=":night_with_stars:"
          data-index="45"
          title="night with stars"
          data-eid="176"
        >
          <span className="emojione emojione-1f303"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f304"
          data-shortname=":sunrise_over_mountains:"
          data-index="46"
          title="sunrise over mountains"
          data-eid="177"
        >
          <span className="emojione emojione-1f304"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f305"
          data-shortname=":sunrise:"
          data-index="47"
          title="sunrise"
          data-eid="178"
        >
          <span className="emojione emojione-1f305"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f306"
          data-shortname=":city_dusk:"
          data-index="48"
          title="cityscape at dusk"
          data-eid="179"
        >
          <span className="emojione emojione-1f306"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f307"
          data-shortname=":city_sunset:"
          data-index="49"
          title="sunset over buildings"
          data-eid="180"
        >
          <span className="emojione emojione-1f307"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f309"
          data-shortname=":bridge_at_night:"
          data-index="50"
          title="bridge at night"
          data-eid="182"
        >
          <span className="emojione emojione-1f309"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f30c"
          data-shortname=":milky_way:"
          data-index="51"
          title="milky way"
          data-eid="185"
        >
          <span className="emojione emojione-1f30c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3a0"
          data-shortname=":carousel_horse:"
          data-index="52"
          title="carousel horse"
          data-eid="286"
        >
          <span className="emojione emojione-1f3a0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3a1"
          data-shortname=":ferris_wheel:"
          data-index="53"
          title="ferris wheel"
          data-eid="287"
        >
          <span className="emojione emojione-1f3a1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3a2"
          data-shortname=":roller_coaster:"
          data-index="54"
          title="roller coaster"
          data-eid="288"
        >
          <span className="emojione emojione-1f3a2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f682"
          data-shortname=":steam_locomotive:"
          data-index="55"
          title="steam locomotive"
          data-eid="754"
        >
          <span className="emojione emojione-1f682"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f683"
          data-shortname=":railway_car:"
          data-index="56"
          title="railway car"
          data-eid="690"
        >
          <span className="emojione emojione-1f683"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f684"
          data-shortname=":bullettrain_side:"
          data-index="57"
          title="high-speed train"
          data-eid="691"
        >
          <span className="emojione emojione-1f684"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f685"
          data-shortname=":bullettrain_front:"
          data-index="58"
          title="high-speed train with bullet nose"
          data-eid="692"
        >
          <span className="emojione emojione-1f685"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f686"
          data-shortname=":train2:"
          data-index="59"
          title="train"
          data-eid="755"
        >
          <span className="emojione emojione-1f686"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f687"
          data-shortname=":metro:"
          data-index="60"
          title="metro"
          data-eid="693"
        >
          <span className="emojione emojione-1f687"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f688"
          data-shortname=":light_rail:"
          data-index="61"
          title="light rail"
          data-eid="756"
        >
          <span className="emojione emojione-1f688"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f689"
          data-shortname=":station:"
          data-index="62"
          title="station"
          data-eid="694"
        >
          <span className="emojione emojione-1f689"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f68a"
          data-shortname=":tram:"
          data-index="63"
          title="tram"
          data-eid="757"
        >
          <span className="emojione emojione-1f68a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f69d"
          data-shortname=":monorail:"
          data-index="64"
          title="monorail"
          data-eid="766"
        >
          <span className="emojione emojione-1f69d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f69e"
          data-shortname=":mountain_railway:"
          data-index="65"
          title="mountain railway"
          data-eid="767"
        >
          <span className="emojione emojione-1f69e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f68b"
          data-shortname=":train:"
          data-index="66"
          title="tram car"
          data-eid="862"
        >
          <span className="emojione emojione-1f68b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f68c"
          data-shortname=":bus:"
          data-index="67"
          title="bus"
          data-eid="695"
        >
          <span className="emojione emojione-1f68c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f68d"
          data-shortname=":oncoming_bus:"
          data-index="68"
          title="oncoming bus"
          data-eid="758"
        >
          <span className="emojione emojione-1f68d"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f68e"
          data-shortname=":trolleybus:"
          data-index="69"
          title="trolleybus"
          data-eid="759"
        >
          <span className="emojione emojione-1f68e"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f690"
          data-shortname=":minibus:"
          data-index="70"
          title="minibus"
          data-eid="760"
        >
          <span className="emojione emojione-1f690"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f691"
          data-shortname=":ambulance:"
          data-index="71"
          title="ambulance"
          data-eid="697"
        >
          <span className="emojione emojione-1f691"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f692"
          data-shortname=":fire_engine:"
          data-index="72"
          title="fire engine"
          data-eid="698"
        >
          <span className="emojione emojione-1f692"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f693"
          data-shortname=":police_car:"
          data-index="73"
          title="police car"
          data-eid="699"
        >
          <span className="emojione emojione-1f693"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f694"
          data-shortname=":oncoming_police_car:"
          data-index="74"
          title="oncoming police car"
          data-eid="761"
        >
          <span className="emojione emojione-1f694"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f695"
          data-shortname=":taxi:"
          data-index="75"
          title="taxi"
          data-eid="700"
        >
          <span className="emojione emojione-1f695"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f696"
          data-shortname=":oncoming_taxi:"
          data-index="76"
          title="oncoming taxi"
          data-eid="762"
        >
          <span className="emojione emojione-1f696"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f697"
          data-shortname=":red_car:"
          data-index="77"
          title="automobile"
          data-eid="701"
        >
          <span className="emojione emojione-1f697"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f698"
          data-shortname=":oncoming_automobile:"
          data-index="78"
          title="oncoming automobile"
          data-eid="763"
        >
          <span className="emojione emojione-1f698"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f699"
          data-shortname=":blue_car:"
          data-index="79"
          title="recreational vehicle"
          data-eid="702"
        >
          <span className="emojione emojione-1f699"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f69a"
          data-shortname=":truck:"
          data-index="80"
          title="delivery truck"
          data-eid="703"
        >
          <span className="emojione emojione-1f69a"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f69b"
          data-shortname=":articulated_lorry:"
          data-index="81"
          title="articulated lorry"
          data-eid="764"
        >
          <span className="emojione emojione-1f69b"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f69c"
          data-shortname=":tractor:"
          data-index="82"
          title="tractor"
          data-eid="765"
        >
          <span className="emojione emojione-1f69c"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6b2"
          data-shortname=":bike:"
          data-index="83"
          title="bicycle"
          data-eid="714"
        >
          <span className="emojione emojione-1f6b2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6f4"
          data-shortname=":scooter:"
          data-index="84"
          title="scooter"
          data-eid="2302"
        >
          <span className="emojione emojione-1f6f4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6f5"
          data-shortname=":motor_scooter:"
          data-index="85"
          title="motor scooter"
          data-eid="2303"
        >
          <span className="emojione emojione-1f6f5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f68f"
          data-shortname=":busstop:"
          data-index="86"
          title="bus stop"
          data-eid="696"
        >
          <span className="emojione emojione-1f68f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6e3"
          data-shortname=":motorway:"
          data-index="87"
          title="motorway"
          data-eid="1250"
        >
          <span className="emojione emojione-1f6e3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6e4"
          data-shortname=":railway_track:"
          data-index="88"
          title="railway track"
          data-eid="1251"
        >
          <span className="emojione emojione-1f6e4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26fd"
          data-shortname=":fuelpump:"
          data-index="89"
          title="fuel pump"
          data-eid="89"
        >
          <span className="emojione emojione-26fd"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6a8"
          data-shortname=":rotating_light:"
          data-index="90"
          title="police cars revolving light"
          data-eid="708"
        >
          <span className="emojione emojione-1f6a8"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6a5"
          data-shortname=":traffic_light:"
          data-index="91"
          title="horizontal traffic light"
          data-eid="706"
        >
          <span className="emojione emojione-1f6a5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6a6"
          data-shortname=":vertical_traffic_light:"
          data-index="92"
          title="vertical traffic light"
          data-eid="772"
        >
          <span className="emojione emojione-1f6a6"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6a7"
          data-shortname=":construction:"
          data-index="93"
          title="construction sign"
          data-eid="707"
        >
          <span className="emojione emojione-1f6a7"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2693"
          data-shortname=":anchor:"
          data-index="94"
          title="anchor"
          data-eid="73"
        >
          <span className="emojione emojione-2693"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26f5"
          data-shortname=":sailboat:"
          data-index="95"
          title="sailboat"
          data-eid="87"
        >
          <span className="emojione emojione-26f5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6f6"
          data-shortname=":canoe:"
          data-index="96"
          title="canoe"
          data-eid="2304"
        >
          <span className="emojione emojione-1f6f6"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6a4"
          data-shortname=":speedboat:"
          data-index="97"
          title="speedboat"
          data-eid="705"
        >
          <span className="emojione emojione-1f6a4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6f3"
          data-shortname=":cruise_ship:"
          data-index="98"
          title="passenger ship"
          data-eid="1262"
        >
          <span className="emojione emojione-1f6f3"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="26f4"
          data-shortname=":ferry:"
          data-index="99"
          title="ferry"
          data-eid="1687"
        >
          <span className="emojione emojione-26f4"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6e5"
          data-shortname=":motorboat:"
          data-index="100"
          title="motorboat"
          data-eid="1252"
        >
          <span className="emojione emojione-1f6e5"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6a2"
          data-shortname=":ship:"
          data-index="101"
          title="ship"
          data-eid="704"
        >
          <span className="emojione emojione-1f6a2"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="2708"
          data-shortname=":airplane:"
          data-index="102"
          title="airplane"
          data-eid="92"
        >
          <span className="emojione emojione-2708"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6e9"
          data-shortname=":airplane_small:"
          data-index="103"
          title="small airplane"
          data-eid="1256"
        >
          <span className="emojione emojione-1f6e9"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6eb"
          data-shortname=":airplane_departure:"
          data-index="104"
          title="airplane departure"
          data-eid="1258"
        >
          <span className="emojione emojione-1f6eb"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6ec"
          data-shortname=":airplane_arriving:"
          data-index="105"
          title="airplane arriving"
          data-eid="1259"
        >
          <span className="emojione emojione-1f6ec"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f4ba"
          data-shortname=":seat:"
          data-index="106"
          title="seat"
          data-eid="587"
        >
          <span className="emojione emojione-1f4ba"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f681"
          data-shortname=":helicopter:"
          data-index="107"
          title="helicopter"
          data-eid="753"
        >
          <span className="emojione emojione-1f681"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f69f"
          data-shortname=":suspension_railway:"
          data-index="108"
          title="suspension railway"
          data-eid="768"
        >
          <span className="emojione emojione-1f69f"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6a0"
          data-shortname=":mountain_cableway:"
          data-index="109"
          title="mountain cableway"
          data-eid="769"
        >
          <span className="emojione emojione-1f6a0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6a1"
          data-shortname=":aerial_tramway:"
          data-index="110"
          title="aerial tramway"
          data-eid="770"
        >
          <span className="emojione emojione-1f6a1"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f680"
          data-shortname=":rocket:"
          data-index="111"
          title="rocket"
          data-eid="689"
        >
          <span className="emojione emojione-1f680"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f6f0"
          data-shortname=":satellite_orbital:"
          data-index="112"
          title="satellite"
          data-eid="1213"
        >
          <span className="emojione emojione-1f6f0"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f320"
          data-shortname=":stars:"
          data-index="113"
          title="shooting star"
          data-eid="194"
        >
          <span className="emojione emojione-1f320"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f308"
          data-shortname=":rainbow:"
          data-index="114"
          title="rainbow"
          data-eid="181"
        >
          <span className="emojione emojione-1f308"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f386"
          data-shortname=":fireworks:"
          data-index="115"
          title="fireworks"
          data-eid="272"
        >
          <span className="emojione emojione-1f386"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f387"
          data-shortname=":sparkler:"
          data-index="116"
          title="firework sparkler"
          data-eid="273"
        >
          <span className="emojione emojione-1f387"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f391"
          data-shortname=":rice_scene:"
          data-index="117"
          title="moon viewing ceremony"
          data-eid="283"
        >
          <span className="emojione emojione-1f391"></span>
        </span>
        <span
          className="e1"
          onClick={(e) => onClickEmoji(e)}
          tabIndex="-1"
          id="1f3c1"
          data-shortname=":checkered_flag:"
          data-index="118"
          title="chequered flag"
          data-eid="319"
        >
          <span className="emojione emojione-1f3c1"></span>
        </span>
      </div>
    </div>
  );
};