How to embed two components in one component ? - GeeksforGeeks (2024)

Table of Contents

Prerequisites Approach Creating React Application Project Structure: Javascript Javascript Javascript CSS Please Login to comment... Similar Reads Thank You!

Courses
Tutorials
- Data Structures & Algorithms
- Python
- ML & Data Science
  - Machine Learning
  - Data Science Tutorial
  - Data Science Packages
    - Pandas Tutorial
    - NumPy Tutorial
  - Data Visualization
  - Data Analysis
  - Deep Learning
  - NLP Tutorial
  - OpenCV Tutorial
  - Interview Questions
- System Design
- Interview Corner
- Languages
  - C
  - C++
  - Java
  - Python
  - R Tutorial
  - C#
  - SQL
  - Scala
  - Perl
  - Go Language
- Web Development
  - HTML
  - CSS
  - JavaScript
  - TypeScript
  - ReactJS
  - Node.js
  - PHP
  - AngularJS
  - jQuery
  - Web Development Using Python
  - Web Design
  - 100 Days of Web Development
- CS Subjects
- DevOps And Linux
- School Learning
- GATE
- GeeksforGeeks Videos
Jobs
- Get Hired: Apply for Jobs
- Corporate Hiring Solutions
- Filtered Jobs
Practice
- All DSA Problems
- Problem of the Day
- Company Wise Coding Practice
- GfG SDE Sheet
- Practice Problems Difficulty Wise
- Language Wise Coding Practice
- Curated DSA Lists
Contests

Open In App

Last Updated : 30 Oct, 2023

Summarize

Comments

Improve

Suggest changes

Like Article

Save

Report

React allows us to render one component inside another component. It means we can create the parent-child relationship between the 2 or more components. In the ReactJS Components, it is easy to build a complex UI of any application. We can divide the UI of the application into small components and render every component individually on the web page.

Prerequisites

Approach

To show embed components in one component in React we will create two functional components named child1 and child2 and import them in the App.js directory to render them on the UI.

Creating React Application

Step 1: Use this command to create a new react project

npx create-react-app testapp

Step 2: Move to the testapp project folder from the terminal.

cd testapp

Project Structure:

It should look like this.

Example: Shows two child components embeded in App.js component.

Javascript

// Filename - App.js

import React, { Component } from "react";

import Child1 from "./components/child1";

import Child2 from "./components/child2";

import "./App.css";

class App extends Component {

render() {

return (

<div className="App">

<h1 className="geeks">GeeksforGeeks</h1>

<h3>Embedding two child components</h3>

<div>This is a parent component</div>

<br />

<Child1 />

Javascript

// Filename - components/child1.jsx

import React, { Component } from "react";

class Child1 extends Component {

render() {

return <li>This is child1 component.</li>;

}

export default Child1;

Javascript

// Filename - components/child2.jsx

import React, { Component } from "react";

class Child2 extends Component {

render() {

return <li>This is child2 component.</li>;

}

export default Child2;

CSS

/* Filename - App.css */

.App {

text-align: center;

margin: auto;

}

.geeks {

color: green;

}

Steps to Run: To start the react app, run the below command on your terminal and verify that react app is working fine.

npm start

Output: You will see react app is started on localhost:3000 without any difficulty. Here, the App component is a parent component of the child1 and child2 components.

shubhamvora05

Please Login to comment...

Similar Reads

How to Pass Data from One Component to Another Component in ReactJS ?

In React, passing data from one component to another component is a common task. It helps build a dynamic and interactive web application. We can pass data in components from parent to child, child to parent, and between siblings as shown below. We have 3 approaches to share or pass the data between React components. Table of Content Passing data f

5 min read

Differences between Functional Components and Class Components

In this article, we will learn about the differences between functional and class components in React with the help of an example. We will create a counter and implement it using both class and functional components to understand the differences practically. Functional Components Functional components are some of the more common components that wil

4 min read

Why it is Recommended to use Functional Components over Class Components ?

In this article, we will learn about the use of the functional component over the class component. In React JS, there are two main types of components: Functional ComponentsClass Components.Functional Components are JavaScript functions that take in props as an argument and return a React element to be rendered. They are simpler and less verbose

4 min read

How do Styled Components work in terms of styling React components?

Styled Components is a library for React and React Native that allows you to write CSS in your JavaScript code in a more component-oriented way. Working of Styled Components:Component-Based Styling: Styled Components allow you to write actual CSS directly into your JavaScript files using tagged template literals. This means you can define styles fo

2 min read

Use nested Components With Standalone Components in Angular 17

Angular 17 introduced a new feature called Standalone Components, which allows you to create self-contained components that can be used independently without being tied to a specific module. This feature can make your code more modular and easier to maintain. However, when working with Standalone Components, you might need to nest components within

3 min read

Migrating from Class Components to Functional Components in React

React version 16.8.0 or higher allows users to write the functional components without the use of class components. Using class components, we need to write the whole class to interact with the state and lifecycle of the component. The code was quite complex and harder to understand which led to lower performance and limited usability. With the hel

4 min read

HTML | DOM Embed Object

The Embed Object in HTML DOM is used to represent the <embed> element. The <embed> element can be accessed by using getElementById() method. Note: This object is new in HTML 5. Property Values: height: It sets or returns the value of the height attribute. src: It sets or returns the value of the src attribute of an Embed Object, type: I

2 min read

HTML | <embed> type Attribute

The HTML embed type Attribute contains the media_type content. It is used to specify the media type of the embedded content. Syntax: <embed type="media_type"> Attribute Values: media_type: It contains the media_type content. It is used to specify the media type of the embedded content. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt

1 min read

HTML | <embed> src Attribute

The HTML <embed> src Attribute is used to specify the web address of the embedded content. Syntax: <embed src="URL"> Attribute Values: URL: It is used to specify the web address of the embedded content.An absolute URL: It points to another webpage.A relative URL: it points to a file within a website. Example: C/C++ Code &lt;!DOCTYPE

1 min read

HTML | <embed> height Attribute

The HTML <embed> height attribute is used to specify the height of the embedded content. Syntax: <embed height = "pixels"> Attribute Values: pixels: The width value are set in terms of pixels. It is used to specify the height of embedded content. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;

1 min read

HTML | <embed> width Attribute

The HTML embed width attribute is used to specify the width of the embedded content. Syntax: <embed width="pixels"> Attribute Values: pixels: The width of embed value are set in terms of pixels. It is used to specify the width of embedded content. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;

1 min read

HTML | DOM Embed src Property

The HTML DOM Embed src Property is used to set or return the value of the src attribute in an embed element. This attribute specifies the address of the external file to embed. Syntax: Return the src property: embedObject.src Set the src property: embedObject.src = URL Property Values: URL: Specify the URL of the external file to embed. Possible Va

1 min read

HTML | DOM embed height property

The embed height property in HTML DOM is used to set or return the value of the height attribute. The height attribute defines the height of the embedded content in terms of pixels. Syntax: Return the height property:embedObject.heightSet the height property:embedObject.height = pixels Property Values: px: Specify the height in pixels of the embedd

2 min read

HTML DOM embed type property

The DOM embed height property in HTML is used to set or return the value of the type attribute in an embed element. The type attribute specifies the MIME type of the embedded content. Syntax: Return the type property:embedObject.typeSet the type property:embedObject.type = MIME_type Property Values: MIME_type: It contains a single value MIME-type w

1 min read

HTML | DOM embed width property

The DOM embed width property in HTML is used to set or return the value of the width attribute. The width attribute defines the width of the embedded content, in pixels. Syntax: Return the width property:embedObject.widthSet the width property:embedObject.width = pixels Property Values: px: Specify the width in pixels of the embedded content. Retur

2 min read

Foundation CSS Responsive Embed Sass Reference

Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to lay out nice responsive websites, apps, and emails and can be accessible to any device. Responsive Embed: In the modern days, we access websites from various devices of different screen sizes. So it is essential

3 min read

How to Create a Google Calendar and Embed into your website ?

Google Calendar is used to quickly schedule meetings and events and also used to get reminders about upcoming activities. Calendar is designed for teams, so it is easy to share your schedule with others and create multiple calendars that you and your team can use together. Here are the steps to add a Google calendar to your website. Step 1: Go to t

1 min read

Semantic-UI | Embed

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.An embed displays the content from other websites like YouTube videos, Vimeo, Google maps, e

1 min read

How to embed audio element in a HTML document ?

Since the release of HTML5, audio can be added to webpages using the <audio> tag. Previously audio could be only played on webpages using web plugins like Flash. The <audio> tag is an inline element which is used to embed sound files into a web page. It is a very useful tag if you want to add audio such as songs, interviews, etc on your

1 min read

How to embed Facebook video using Google AMP ?

Adding Facebook video and comments to websites is now a popular and attractive feature in amp we easily do this by using amp-facebook component, Required Scripts: Use the following script to import amp-facebook component C/C++ Code <script async custom-element="amp-facebook" src= "https://cdn.ampproject.org/v0/amp-facebook-0.1.js

2 min read

How to embed PHP code in an HTML page ?

PHP is the abbreviation of Hypertext Preprocessor and earlier it was abbreviated as Personal Home Page. We can use PHP in HTML code by simply adding a PHP tag without doing any extra work. Example 1: First open the file in any editor and then write HTML code according to requirement. If we have to add PHP code then we can add by simply adding <?

2 min read

How to apply custom color to glyphicon icon embed within a link styled with Bootstrap ?

Given an HTML document with relevant Bootstrap glyphicon and the task is to apply the custom color to them. Approach: First, we need to assign the id attribute to the particular glyphicon which you need to customize by using CSS. We can apply the color property to the particular id and change the icon color by using a hex value or normal color. The

2 min read

How to specify the address of the document to embed in the iframe element in HTML5?

The iframe in HTML stands for Inline frame. The “iframe” element in a webpage helps to display another web page document within some particular area or region using the web browser. The inline frame is used to embed another webpage within the current HTML webpage having different attributes for loading, setting height or width, allowing full screen

2 min read

Foundation CSS Responsive Embed

Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is bu

2 min read

How to Embed Audio and Video in HTML?

HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is a combination of Hypertext and Markup language. HTML uses predefined tags and elements that tell the browser how to properly display the content on the screen. So, in this article, we will learn how to embed audio and video in HTML. In order to

4 min read

How to embed SVG element in an iframe ?

In this article, we will learn how to embed an SVG into an iframe. It is an HTML element that represents nested browsing contexts, allowing one HTML page to be embedded inside of another. It has many attributes but here we discuss src and srcdoc attributes to solve this problem. The iframe src attribute specifies the URL of the document embedded in

2 min read

How to Embed Video in WordPress ?

WordPress is an open-source Content Management System framework. it is a tool that organizes the whole process of creating, storing, and showcasing web content in an optimal way. WordPress started its journey as an improvement tool to enhance the regular typography of day-to-day writing. But it was taken as a blogging tool and as we reach the last

2 min read

Foundation CSS Responsive Embed Aspect Ratios

Foundation CSS is an open-source & responsive front-end framework built by the ZURB foundation in September 2011, which makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily cus

3 min read

Foundation CSS Kitchen Sink Responsive Embed

3 min read

Should I use <img>, <object>, or <embed> for SVG files ?

In this article, we will see how to use the <img>, <object>, or <embed> tags with SVG files, along with understanding the basic syntax for implementing it. Prerequisites: Introduction to HTML All three tags <img>,<object>, and <embed> are basically used to display SVG(Scaler Vector Graphics) files on a webpage, a

3 min read

Article Tags :

Trending in News

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

'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id, }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); return; } var improvement_reason_html = ""; for(var comment of commentArray) { // loop creating improvement reason list markup var comment_id = comment['id']; var comment_text = comment['suggestion']; improvement_reason_html += `

${comment_text}

`; } $('.improvement-reasons_wrapper').html(improvement_reason_html); $('.improvement-bottom-btn').html("Create Improvement"); $('.improve-modal--improvement').hide(); $('.improvement-reason-modal').show(); }, error: function(e){ $('.spinner-loading-overlay:eq(0)').remove(); // stop loader when ajax failed; }, }); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ $('.improvement-reason-modal').hide(); } $('.improve-modal--improvement').show(); }); function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; script.onload = callback; document.head.appendChild(script); } function suggestionCall() { var suggest_val = $.trim($("#suggestion-section-textarea").val()); var array_String= suggest_val.split(" ") var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(suggest_val.length <= 2000){ var payload = { "gfg_post_id" : `${post_id}`, "suggestion" : `

${suggest_val}

`, } if(!loginData || !loginData.isLoggedIn) // User is not logged in payload["g-recaptcha-token"] = gCaptchaToken jQuery.ajax({ type:'post', url: "https://apiwrite.geeksforgeeks.org/suggestions/auth/create/", xhrFields: { withCredentials: true }, crossDomain: true, contentType:'application/json', data: JSON.stringify(payload), success:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-section-textarea').val(""); jQuery('.suggest-bottom-btn').css("display","none"); // Update the modal content const modalSection = document.querySelector('.suggestion-modal-section'); modalSection.innerHTML = `

Thank You!

Your suggestions are valuable to us.

You can now also contribute to the GeeksforGeeks community by creating improvement and help your fellow geeks.

`; }, error:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Something went wrong."); jQuery('#suggestion-modal-alert').show(); error_msg = true; } }); } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Minimum 5 Words and Maximum Character limit is 2000."); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Enter atleast four words !"); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } if(error_msg){ setTimeout(() => { jQuery('#suggestion-section-textarea').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('

'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // load the captcha script and set the token loadScript('https://www.google.com/recaptcha/api.js?render=6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY',[], function() { setGoogleRecaptcha(); }); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('

'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.improvement-reason-modal').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); });