Open In App

How to access props.children in a stateless functional component in ReactJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

The {props. children} allows you to create a generic template, which can be modified by a parent when invoked. In this way, a parent component can easily pass whatever is necessary to its child, even generated layout features. Anytime you call a component, it automatically displays whatever it has between its opening and closing tags. A component with children is always identified with an opening and a closing tag. Each child must go between these two tags.

Props are implemented by defining props in the parent component and passing them down to the next child component and then passing the value again through props in the child component, and then again through the grandchild – which is repeated until the value of the passed value has arrived in the target component. It is a tedious, error-prone process that decreases code flexibility.

Implementation of {props. children}: Implementation is pretty straightforward. Import the child component into the parent component, but instead of invoking it with a self-closing tag, use a standard open/close tag. Information is passed between the opening and closing tags of a child component – in addition to the standard implementation for passing props.

Why do need {props. children} ? 

If we want a flexible component that can store anything between the opening and closing tags of a parent component, that preserves the formatting styles of all its children, then {props. Children} is what we need. There can be instances where you don’t know its children in advance so you just pass {props. children} which specifies anything that will be included in between the opening and closing tags. This is used in creating layouts. Standard props cannot specify the styles of other components. It may be necessary to create layouts where certain components remain the same, but the content inside them differs slightly, so creating different components to render data with different styles might not be a good practice. When a component wanted to pass information down to its grandchildren and subsequent children it worked fine until a large number of children grew to the point where many of the props were identical and needed to be modified slightly. It is difficult to comprehend each prop’s features when working with hundreds of them. Build layouts with {props. children} and avoid prop drilling. 

Advantages

  • Avoids prop drilling
  • Helps to create compose components
  • Helps in building layouts
  • In order to group unknown similar elements into a parent element.
  • We can use them when the elements are not known in advance.

Prerequisites

Approach

To access props.children in a stateless functional component in React JS we passs the component as the children to that component and use it from arguments as props.Hence to display that data create a simple Card component. We will pass the data down via [props. children] and see how our cards appear.

Steps to create React Application

Step 1: Create react app “cards”. Make a project directory, head over to the terminal, and create a react app named “cards ” using the following command:

npx create-react-app cards

Step 2: After the cards app is created, switch to the new folder cards by typing the command below:

cd cards

Project Structure:

Final Project Structure 

Example: This example display some cards to access prop.child in stateless component to display the data on the page.

Javascript




// Filename - App.js
 
import Card from "./Card";
import Button from "./Button";
function App() {
    return (
        <>
            {/* card 1 */}
            <Card>
                <p
                    style={{
                        color: "green",
                        fontWeight: "bold",
                    }}
                >
                    Hello,GEEKS!
                </p>
            </Card>
 
            {/* card 2  */}
            <Card>
                <h1 style={{ color: "green" }}>
                    Welcome to GeeksforGeeks
                </h1>
                <hr
                    style={{
                        borderTop: "dotted 2px green",
                    }}
                />
                <h3>
                    A computer Science portal for Geeks.{" "}
                </h3>
            </Card>
 
            {/* card 3  */}
            <Card>
                <h4>
                    It contains well written , well thought
                    and well explained computer science
                    articles.
                </h4>
            </Card>
 
            {/* card 4 */}
            <Card>
                <Button
                    button1="Explore Courses"
                    button2="Read Articles"
                >
                    <h3 style={{ color: "Blue" }}>
                        CONTRIBUTE
                    </h3>
                    <hr
                        style={{
                            borderTop: "dotted 2px green",
                        }}
                    />
                    Pick suggested articles and get started
                    .
                </Button>
            </Card>
        </>
    );
}
export default App;


Javascript




// Filename - Card.js
 
import React from "react";
 
const Card = (props) => {
    return (
        <div
            style={{
                width: "30%",
                margin: " 30px auto 20px auto",
                boxShadow:
                    "0 5px 10px 2px rgba(0,0,0,0.25) ",
                padding: "20px",
                textAlign: "center",
            }}
        >
            {props.children}
        </div>
    );
};
export default Card;


Javascript




// Filename - Button.js
 
import React from "react";
 
const buttonstyle = {
    backgroundColor: "white",
    border: "2px solid #4CAF50",
    color: "black",
    padding: "4px",
    textAlign: "center",
    fontSize: "16px",
    margin: "4px 2px",
    cursor: "pointer",
};
 
const Button = (props) => {
    return (
        <div>
            <button style={buttonstyle}>
                {props.button1}
            </button>
            <button style={buttonstyle}>
                {props.button2}
            </button>
            <button style={buttonstyle}>
                {props.children}
            </button>
        </div>
    );
};
 
export default Button;


Step to run the application: Now let us run our application by using the following command.

npm start

Output: By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser. You will see, the data on each card differs, but the layout remains the same. The content of the cards is formatted differently. 

Implementation of props.children – Working Output



Last Updated : 02 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads