Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • React Tutorial
  • React Exercise
  • React Basic Concepts
  • React Components
  • React Props
  • React Hooks
  • React Router
  • React Advanced
  • React Examples
  • React Interview Questions
  • React Projects
  • Next.js Tutorial
  • React Bootstrap
  • React Material UI
  • React Ant Design
  • React Desktop
  • React Rebass
  • React Blueprint
  • JavaScript
  • Web Technology
Open In App
Next Article:
How to use Inline Styles in React ?
Next article icon

How to use innerHtml in React JS ?

Last Updated : 26 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

React.js provides a easy way of handling UI updates. However, sometimes you need to inject HTML directly into your components.

Prerequisites

  • Introduction to React
  • React Components
  • React Hooks
  • NPM or NPX

In this article, we are going to learn how can we use InnerHTML in React JS. We can add HTML into ReactJS by using the 'dangerouslySetInnerHTML' property. As the name suggests it is dangerous because it directly injects HTML into your react components, which can lead to security issues and other manipulative problems. It can also increase risks like cross-site scripting (XSS).

Steps to Create the React Application

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Project Structure:

pppppppp
Project structure

Example: Here we are creating a component 'HTML' in which we are creating a const and storing a html element as a value and passing that value in a div element for dangerouslySetInnerHTML , So that we can inject that HTML in out Reactjs component and render it on screen. After that we are importing that 'HTML' component in App.js file and it will render to the screen.

JavaScript 
//HTML.js import React from 'react';  function HTML() {     const htmlContent =          `<div>             <h3>                 GeekForGeeks             </h3>             <p>                 innerHTML in reactjs             </p>           </div>`;      return (         <div>             <div dangerouslySetInnerHTML={                 { __html: htmlContent }              } />         </div>     ); }  export default HTML;
JavaScript 
//App.js  import './App.css'; import HTML from './HTML'; function App() {     return (          <div className="center">             <HTML />         </div>      ); }  export default App;

Steps to run the application:

npm start

Output:

plplp
Output

Next Article
How to use Inline Styles in React ?

M
meetahaloyx4
Improve
Article Tags :
  • Web Technologies
  • ReactJS
  • React-Questions

Similar Reads

  • How to use innerHTML in JavaScript ?
    The innerHTML property in JavaScript allows you to get or set the HTML content of an element as a string. Syntax ForGetting HTML content of an element:let element = document.getElementById("myElementId"); let htmlContent = element.innerHTML;Setting HTML content of an element:let element = document.g
    2 min read
  • How to use Inline Styles in React ?
    ReactJS is a JavaScript library that is used to build a user interface. React makes it easy to create an interactive user interface by using a component-based approach. It offers various ways to apply styles to components. One of the methods is using inline styles, where styles are defined directly
    3 min read
  • How To Use Inline Styles in ReactJS?
    Inline styles in React allow you to directly apply CSS styles to elements using the style attribute. This is often used for dynamic styling, where styles need to be applied based on the component's state or props. Inline styles in React are written as JavaScript objects. Each CSS property is camelCa
    3 min read
  • How to use Bootstrap in React JS ?
    Explore the seamless integration of Bootstrap into React JS for enhanced styling and responsive web development. This comprehensive guide provides step-by-step instructions, covering the installation process, utilization of Bootstrap components, and best practices to harness the power of both techno
    3 min read
  • How to add code input in React JS?
    In this article, we are going to learn how we can add Code Input in React JS. React is a front-end JavaScript library for constructing user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. Approach to add code input: To incorporate our
    2 min read
  • How to use styles in ReactJS ?
    React is a popular JavaScript library for building single-page applications (SPAs) with dynamic user interfaces. Styling in React can be done in various ways, each with its advantages. In this article, we will explore different approaches to applying styles in React, including inline styles, CSS fil
    4 min read
  • How to Insert an Iframe in React ?
    In this article, we are going to insert an Iframe in React JS. The iframe stands for the inline frame. The "iframe" tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another do
    1 min read
  • How to use Portal Component in ReactJS ?
    The portal component renders its children into a new subtree outside the current DOM hierarchy. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Portal Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReact JSMat
    2 min read
  • How to use List Component in ReactJS?
    Lists are continuous, vertical indexes of text or images. Material UI for React has this component available for us, and it is very easy to integrate. We can use the List Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReactJSSteps to Create the React Application And In
    2 min read
  • How to use ReactJS with HTML Template ?
    We all know ReactJS is a front-end development framework. For the front end, we need to create HTML templates. So, this article teaches you how to use HTML templates in ReactJS. The process is very simple.  Prerequisites:NodeJS or NPMReact JSApproach: We will create a simple one-page HTML template i
    4 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences