estoy usando emoji api y obtengo emoji unicode como este U+1F425 para poder mostrar emoji en jsx. tengo que reemplazar U+1F425 a \u{1F425} . básicamente solo necesito obtener 1F425 de la 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;¡Gracias por tu ayuda!
Los emojis no son más que personajes. Tienes que convertir ese código a hexadecimal y luego convertir ese código hexadecimal a cadena.
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<span dangerouslySetInnerHTML={{ __html: emo.htmlCode[0] }}></span>
Cortar el código emoji obtenido de la API debería funcionar...
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;...puedes probar esto.