Skip to main content

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

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.

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",
            URL: "https://www.neveropen.tech/color-game-python/",
            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 (
        
            style=
                display: "flex",
                justifyContent: "center",
                margin: "20px",
                padding: "20px",
            
        >
            Projects.map((project, idx) =>
                return (
                    
                        Topic=project.Topic
                        URL=project.URL
                        title=project.title
                        key=idx
                    />
                );
            )
        
    );
 
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 (
            
                style=
                    border: "2px solid green",
                    margin: "5px",
                    width: "40vw",
                    padding: "5px",
                
            >
                

this.props.Topic

                
                    
                        href=this.props.URL
                        style= textDecoration: "none", color: "black"
                        target="_blank"
                    >
                        this.props.title
                    
                
            
        );
    
 
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. and ) . 

Javascript




import React, Component from "react";
 
export class Text extends Component
    render()
        return
this.props.children
;
    
 
export default Text;

Output: The app works as expected.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

https://neveropen.tech/what-is-this-props-children-and-when-you-should-use-it/?feed_id=50&_unique_id=683cca4c024ec

Comments

Popular posts from this blog

Bare Metal Billing Client Portal Guide

Contents Order a Bare Metal Server My Custom / Contract Pricing View Contract Details Location Management Order History & Status View Order Details Introduction The phoenixNAP Client Portal allows you to purchase bare metal servers and other phoenixNAP products and services. Using the intuitive interface and its essential tools, you can also easily manage your infrastructure. This quick guide will show you how to use the new form to order a bare metal server and how to navigate through new bare metal features within the phoenixNAP Client Portal. Order a Bare Metal Server An order form is an accordion-based process for purchasing phoenixNAP products. Our order form allows you to view the pricing and order multiple products from the same category at the same time. Note: The prices on the form are per month . A contract is not required. However, if you want a contracted price, you may be eligible for a discount depending on the quantity and ...

Add an element in Array to make the bitwise XOR as K

Given an array arr[] containing N positive integers, the task is to add an integer such that the bitwise Xor of the new array becomes K. Examples: Input: arr[] = 1, 4, 5, 6, K = 4 Output: 2 Explanation: Bit-wise XOR of the array is 6.  And bit-wise XOR of 6 and 2 is 4. Input: arr[] = 2, 7, 9, 1, K = 5 Output: 8   Approach: The solution to the problem is based on the following idea of bitwise Xor: If for two numbers X and Y , the bitwise Xor of X and Y is Z then the bitwise Xor of X and Z is Y. Follow the steps to solve the problem: Let the bitwise XOR of the array elements be X .  Say the required value to be added is Y such that X Xor Y = K . From the above observation, it is clear that the value to be added (Y) is the same as X Xor K . Below is the implementation of the above approach: C++ // C++ code to implement the above approach   #include using namespace std;   // Function to find the required value int find_...

Mahotas – Template Matching

In this article we will see how we can do template matching in mahotas. Template is basically a part or structure of image. In this tutorial we will use “lena” image, below is the command to load it.   mahotas.demos.load('lena') Below is the lena image      In order to do this we will use mahotas.template_match method Syntax : mahotas.template_match(img, template) Argument : It takes image object and template as argument Return : It returns image object    Note : Input image should be filtered or should be loaded as grey In order to filter the image we will take the image object which is numpy.ndarray and filter it with the help of indexing, below is the command to do this   image = image[:, :, 0] Below is the implementation    Python3 # importing required libraries import mahotas import mahotas.demos from pylab import gray, imshow, show import numpy as np import matplotlib.pyplot as plt      # loading image ...