How to Insert an Iframe in React ?

How to use innerHtml in React JS ?

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 document within the current document.

Prerequisites:

React
NPM

Approach

In this approach, we are using the iframe tag provided in HTML as a JSX, and in the source, we are displaying the React JS Official Site. In this approach, we do not need any dependencies to install on our computer system.

Syntax:

<iframe src="URL" title="description"></iframe>

Example: In this example, we will create an iframe and render a website into that frame.

Javascript

// App.js 
import React from 'react'
  
function App() { 
    return ( 
        <div className="App" > 
            <div> 
                <h2 style={{ color: 'green' }}> 
                    w3wiki 
                </h2> 
                <h2> 
                    How to create an Iframe in React 
                </h2> 
                <iframe width="560"
                        height="315"
                        src= 
"https://www.youtube.com/embed/tmg6d3T_T6Q"
                        title="w3wiki" > 
                </iframe> 
            </div> 
        </div> 
)} 
  
export default App;

Output

Tags:

#React-Questions #ReactJS #Web Technologies