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",
            URL: "https://www.neveropen.tech/make-notepad-using-tkinter/",
            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",
            URL: "https://www.neveropen.tech/opencv-c-program-face-detection/",
            title: "OpenCV C++ Program for Face Detection",
        ,
        
            Topic: "OpenCV projects",
            URL: "https://www.neveropen.tech/opencv-c-program-for-coin-detection/",
            title: "OpenCV C++ Program for coin detection",
        ,
        
            Topic: "Java projects",
            URL: "https://www.neveropen.tech/opencv-c-program-face-detection/",
            title: "Generating Password and OTP in Java",
        ,
        
            Topic: "Java projects",
            URL: "https://www.neveropen.tech/generating-password-otp-java/",
            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












Labels:





























Comments











Post a Comment



















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




















Post a Comment









Read more






























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




















Post a Comment









Read more






























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




















Post a Comment









Read more