How to concatenate unicode and variable in ReactJS ? - GeeksforGeeks

12 Apr, 2021
Unicode: Unicode is an encoding standard for all characters in the universe. Every language code and symbol in this world is assigned by Unicode. There is no encoding standard that supports all languages, By using Unicode standard, we can retrieve and combine data with all language combinations.
Example: 
U+2192
In the above example, a right-facing arrow is represented in Unicode by U+2192.
How to create React Application:
Step 1: Create a React application using the following command. npx create-react-app geeksforgeeks
Step 1: Create a React application using the following command.
 npx create-react-app geeksforgeeks
Step 2: After creating your project folder i.e. geeksforgeeks, move to it using the following command.cd geeksforgeeksProject Structure:Folder structureHow to concatenate Unicode and variable in ReactJS: To concatenate we first convert Unicode into its numerical value and for that, we will use parseInt.parseInt(Unicode,base)Now, this numerical value needs to be converted into its character and for that, we can useString.fromCodePoint(numericalValue).Example: Make the following changes to your App.js fileApp.jsApp.jsimport React from 'react'    const App = ({ unicode }) => {      return(         <h1>           This is a Right arrow           {String.fromCodePoint(parseInt(unicode,16))}       </h1>   )}export default App;Now import this App.js file in your index.js file(by default it is already being imported) and pass the value of Unicode in the App component.index.jsindex.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';      ReactDOM.render(    <React.StrictMode>       <App unicode='2192'/>    </React.StrictMode>,     document.getElementById('root')      );Now run the local server using the following command within the react-app directory  npm startOutput:My Personal Notes
arrow_drop_upSave
Step 2: After creating your project folder i.e. geeksforgeeks, move to it using the following command.
cd geeksforgeeks
Project Structure:
Folder structure
How to concatenate Unicode and variable in ReactJS: To concatenate we first convert Unicode into its numerical value and for that, we will use parseInt.
parseInt(Unicode,base)
Now, this numerical value needs to be converted into its character and for that, we can use
String.fromCodePoint(numericalValue).
Example: Make the following changes to your App.js file
App.js
import React from 'react'    const App = ({ unicode }) => {      return(         <h1>           This is a Right arrow           {String.fromCodePoint(parseInt(unicode,16))}       </h1>   )}export default App;
Now import this App.js file in your index.js file(by default it is already being imported) and pass the value of Unicode in the App component.
index.js
import React from 'react';import ReactDOM from 'react-dom';import App from './App';      ReactDOM.render(    <React.StrictMode>       <App unicode='2192'/>    </React.StrictMode>,     document.getElementById('root')      );
Now run the local server using the following command within the react-app directory  
npm start
Output:
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
How to set background images in ReactJS ?
Axios in React: A Guide for Beginners
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript