How to access props.children in a stateless functional component in ReactJS ?
Last Updated : 31 Jul, 2024
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; // 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; // 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.
Similar Reads
How to access props inside a functional component?
React is an open-source JavaScript library that is mainly used for developing User Interface or UI components. It is a single-page application that is popularly used for developing dynamic web interfaces. While building a React application, the React components serve as basic building blocks. In Rea
3 min read
How To Get Previous State In ReactJS Functional Component?
To get the previous state in ReactJS Functional Component we can use the previous value of the state while using the set state method. State can only be directly accessed in the class component so we will be using the react useState hook to accomplish the task. PrerequisitesReact JSReact JS function
2 min read
How to set Parent State from Children Component in ReactJS?
To set the parent state from a child component, we use React’s unidirectional data flow. Instead of directly passing data, we pass a function that enables the child to send data back to set the parent state. Prerequisites:React JSuseState HookApproachTo set parent state from child component in React
2 min read
How to use PropTypes in a Functional Component in React?
PropTypes is a mechanism provided by React for type-checking props passed to components. It allows developers to specify the expected types of props (such as strings, numbers, arrays, objects, etc.) and whether they are required or optional. PropTypes helps catch bugs early by providing warnings in
2 min read
How To Pass Props From Parent to Child Component in ReactJS?
ReactJS is a powerful library that helps developers build interactive user interfaces by breaking them into reusable components. One of the essential features of React is the ability to pass data between components using props. In React, props allow parent components to send data or functions to chi
4 min read
How to convert functional component to class component in ReactJS ?
ReactJS offers two primary ways of creating components: functional components and class components. While functional components are more concise and easier to reason about, there are situations where class components may be necessary with the flexibility to use lifecycle methods and manage the state
2 min read
How to Call Parent Components's Function from Child Component in React ?
In React, it is very important to manage communication between components for building flexible and maintainable applications. Sometime, you need to trigger a function defined in a parent component from a child component. In this article, we'll see how to achieve this in React by passing down functi
3 min read
What is a pure functional component in ReactJS ?
What is a JavaScript function? A JavaScript function is a block of code designed to perform a particular task which is executed when it is called. How React functional components are similar to JavaScript functions? Conceptually, components are like JavaScript functions. Â A functional component is a
3 min read
How to change states with onClick event in ReactJS using functional components ?
In modern web applications, to change states with onClick event in React JS using functional components is done by Hooks in React as the functional components don't have inbuilt states like class components. With Hooks, state objects are completely independent of each other, so you can have as many
2 min read
Different ways to access props inside a Component in React
The props keyword is the shorthand for properties. It is one of the most important features of React which helps in effective communication between various React components. It is a read-only attribute for passing data from the parent component to the child component. There are various ways to acces
4 min read