How can i replace string in react-CodePudding

im using emoji api and i get emoji unicode's like this U 1F425 to be able to show emoji's in jsx. i have to replace U 1F425 to \u{1F425} . basically i just need to get 1F425 from the api.

Emoji.jsx

import React, { useEffect, useState } from "react";
import Sidebar from "../../Sidebar/Sidebar";
import "./Emoji.css";

const Emoji = ({ isAuth, setIsAuth }) => {
  const [type, setType] = useState([]);
  const getEmoji = () => {
    fetch("https://emojihub.herokuapp.com/api/all/group_animal_bird")
      .then((resp) => resp.json())
      .then((dat) => (console.log(dat), setType(dat)));
  };

  useEffect(() => {
    getEmoji();
    console.log(type);
  }, []);
  return (
    <>
              {type.map((emo) => (
                <>
                  <h6>{emo.name}</h6>
                  <span>{emo.unicode}</span> // This Not
                  <span>{"\u{1F985}"}</span> //This works
                </>
              ))}
    
    </>
  );
};

export default Emoji;

thanks for your help!

CodePudding user response：

Emojis are nothing but characters. You have to convert that code to hex and then convert that hex code to string.

 const res = '1F425';
// Convert your string to hex code
 const resHex =  `0x${res}`;
// Convert Hex to string
 String.fromCodePoint(resHex); // You can render this directly

CodePudding user response：

Slicing the emoji code got from API should work...

import React, { useEffect, useState } from "react";
import Sidebar from "../../Sidebar/Sidebar";
import "./Emoji.css";

const Emoji = ({ isAuth, setIsAuth }) => {
  const [type, setType] = useState([]);
  const getEmoji = () => {
    fetch("https://emojihub.herokuapp.com/api/all/group_animal_bird")
      .then((resp) => resp.json())
      .then((dat) => (console.log(dat), setType(dat)));
  };

  useEffect(() => {
    getEmoji();
    console.log(type);
  }, []);
  return (
    <>
              {type.map((emo) => (
                <>
                  <h6>{emo.name}</h6>
                  <span>{"\u{"   emo.unicode.slice(2)   "}"}</span> //This should work now.
                </>
              ))}
    
    </>
  );
};

export default Emoji;

...you may try this out.

CodePudding user response：

<span dangerouslySetInnerHTML={{ __html: emo.htmlCode[0] }}></span>