Skip to content
Related Articles

Related Articles

What is {this.props.children} and when you should use it ?

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Basic
  • Last Updated : 03 Mar, 2022

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.

App.js




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).

Card.js




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> ) . 

Text.js




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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!