In this article we will learn about { this.props.children }. The important thing to note here is that children are a special prop that is used to pass the data from the parent component to the children component but this data must be enclosed within the parent’s opening and closing tag. This is used mostly in some wrapper component by which we have to pass the data onto the next component and also the data which we pass its static data ( in most cases ) because for dynamic data there is another way to pass props to the component.
For example, consider the code snippet below it shows how to pass dynamic data to any component. Now we’ll understand the usage of {this.props.children } with an example.
<SomeComponent title={state.Title} description={state.Description} />
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder, move into it using the following command:
cd foldername
Step 3: Run the development server:
npm start
Project structure: It will look like this.
Example: Write down the following code in respective files.
Filename-App.js: We’ve created an array of objects which represents the project description on certain topics and it redirects the user into new tab opening the corresponding article.
Javascript
import "./App.css";import Card from "./Component/Card";function App() { let Projects = [ { Topic: "Python projects", title: "Make notepad using Tkinter", }, { Topic: "Python projects", title: "Color game using Tkinter in Python", }, { Topic: "OpenCV projects", title: "OpenCV C++ Program for Face Detection", }, { Topic: "OpenCV projects", title: "OpenCV C++ Program for coin detection", }, { Topic: "Java projects", title: "Generating Password and OTP in Java", }, { Topic: "Java projects", title: "A Group chat application in Java", }, ]; return ( <div style={{ display: "flex", justifyContent: "center", margin: "20px", padding: "20px", }} > {Projects.map((project, idx) => { return ( <Card Topic={project.Topic} URL={project.URL} title={project.title} key={idx} /> ); })} </div> );}export default App; |
Filename-Card.js: Here we have created a Card component and added some basic styles. Note that we’ve enclosed an anchor tag in between the Text component ( this will be referred as this.props.children in Text component).
Javascript
import React, { Component } from "react";import Text from "./Text";export class Card extends Component { render() { return ( <div style={{ border: "2px solid green", margin: "5px", width: "40vw", padding: "5px", }} > <h3> {this.props.Topic} </h3> <Text> <a href={this.props.URL} style={{ textDecoration: "none", color: "black" }} target="_blank" > {this.props.title} </a> </Text> </div> ); }}export default Card; |
Filename-Text.js: Here the this.props.children will be referred to the data which is passed in the Card component within the opening and closing Text component ( i.e. <Text> and </Text> ) .
Javascript
import React, { Component } from "react";export class Text extends Component { render() { return <h6>{this.props.children}</h6>; }}export default Text; |
Output: The app works as expected.
