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 add Event Listeners to wrapped Component in ReactJS ?
Next article icon

How to Pass a React Component into Another to Transclude Content?

Last Updated : 08 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Transclusion refers to Passing a react component's content to another component. Passing component to another in react enable use to render the data inside other component. This content can be rendered as component's children.

Approach

To pass a react component to another in react we will pass it as the children of that component. It will be accessible using props.children and we can render it as required. We can also pass the component as a prop to render its content.

Table of Content

  • Using prop.children
  • Passing Componnet as Prop

Creating React Application

Before proceeding to the approach you have to create a React app.

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:

It will look like the following.

Approch 1: Using prop.children

To transclude the content we can enclose a component inside other component as given below

 <First >
           <Second></Second>
 </First>

The content will be accessible with the help of props and will be rendered as children

in this way the component First can access the Second component using this.props.children attribute.

 {props.children}

Example: This example demonstrate content transclusion by rendering the component as a child by enclosing it with other component.

JavaScript 
// App.js  import React from "react";  const App = () => { 	return ( 		<div className="App"> 			<h1>App</h1> 			<First> 				<Second /> 			</First> 		</div> 	); };  const First = (props) => { 	return ( 		<div> 			<h2>First Component</h2> 			{props.children} 		</div> 	); };  const Second = () => { 	return ( 		<div> 			<h3>Second Component</h3> 		</div> 	); };  export default App;

Approach 2: Passing Componnet as Prop

We can pass the react component as prop into another component to transclude the content.

 <First secondcomp= {<Second/>} >

so the First component can access the component using props.secondcomp attribute.

{props.second}

Example: This example passes a react component as prop to render the content into another component.

JavaScript 
// Filename  import React from "react";  const App = () => { 	return ( 		<div className="App"> 			<h1>App</h1> 			<First secondcomp={<Second />} /> 		</div> 	); };  const First = (props) => { 	return ( 		<div> 			<h2>First Component</h2> 			{props.secondcomp} 		</div> 	); };  const Second = () => { 	return ( 		<div> 			<h3>Second Component</h3> 		</div> 	); };  export default App;

Output: Both the approach will give the same output


Next Article
How to add Event Listeners to wrapped Component in ReactJS ?

M
manikumarsingh789
Improve
Article Tags :
  • Web Technologies
  • ReactJS

Similar Reads

  • How to Pass Data from One Component to Another Component in ReactJS?
    In ReactJS, components are the building blocks of your user interface. Components allow you to create modular, reusable UI elements, but sometimes these components need to communicate with each other. In this article, we will explore the different methods to pass data between components in ReactJS.
    5 min read
  • How to Link a Custom React Component <MyButton> to Another Page ?
    React is a powerful JavaScript library for building user interfaces, and one of its key features is the ability to create reusable components. In this article, we will walk you through the process of linking a custom React component, <MyButton>, to another page using react-router-dom. Prerequi
    4 min read
  • How to Pass JSON Values into React Components ?
    In React, you can pass JSON values into components using props. Props allow us to send data from a parent component to its child components. When rendering a component, you can pass the JSON values as props. These props can then be accessed within the component’s function or class, allowing you to d
    3 min read
  • How to Pass Value from One Child Component to Another in VueJS ?
    Vue.js is a JavaScript framework used in building powerful and beautiful user interfaces. The key feature of Vue.js is its component-based architecture that allows the developers to create reusable and modular components. In this article, we will learn how to pass value from one child component to a
    3 min read
  • How to add Event Listeners to wrapped Component in ReactJS ?
    React provides a powerful way of DOM manipulation by introducing the concept of virtual DOM. It is mainly used to build single-page applications. There are times when you need to add event listeners. This can be achieved by using the concept of forwarding refs and leveraging React's lifecycle method
    3 min read
  • How to Send state/props to Another Component in React with onClick?
    The props and state are the main concepts of React. Actually, only changes in props and/ or state trigger React to re-render your components and potentially update the DOM in the browser Props are used to pass data from a parent to a child component.State is used to manage dynamic data within a comp
    3 min read
  • How to use Avatar Component in ReactJS?
    Avatars are found throughout material design with uses in everything from tables to dialog menus. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Avatar Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReactJSSt
    2 min read
  • How to use Container Component in ReactJS?
    The container centers your content horizontally. It's the most basic layout element. Material UI for React has this component available for us and it is very easy to integrate. We can use the Container component in ReactJS using the following approach. Creating React Application And Installing Modul
    1 min read
  • How to pass data into table from a form using React Components ?
    React JS is a front-end library used to build UI components. This article will help to learn to pass data into a table from a form using React Components. This will be done using two React components named Table and Form. We will enter data into a form, which will be displayed in the table on 'submi
    3 min read
  • How to use Skeleton Component in React JS ?
    When data is not yet loaded, a Skeleton Component serves as a placeholder preview for the user. Material UI for React provides an easily integratable version of this component, and in React JS, the following approach can be employed to utilize the Skeleton Component. Prerequisites:React JSMaterial U
    2 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