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 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' }}>
                    GeeksforGeeks
                </h2>
                <h2>
                    How to create an Iframe in React
                </h2>
                <iframe width="560"
                        height="315"
                        src=
"https://www.youtube.com/embed/tmg6d3T_T6Q"
                        title="GeeksforGeeks" >
                </iframe>
            </div>
        </div>
)}

export default App;

Output