Props and Children

In this reading, you will learn about props and children, what are their purpose and how they are utilized in React components.

Introduction to Props

You might have studied about parameters in a JavaScript function that allows to pass values as an argument, in a more or less similar way, React uses props (an abbreviation for properties) to pass data between components.

In React, a component can pass data to its children components as props. This process is one-way sharing; its reverse is not possible, i.e., the child component cannot pass props to its parent component. This allows for the parent component to control the data that is displayed in its child components. Props, which are to be passed in the child components, can be any data type, such as strings, numbers, arrays, objects, and even functions.

How are props accessed?

Props are passed to a component as an argument and can be accessed within the component with the "this. props" object. The code below depicts the same:

//Parent component
books = [
   "Rich Dad Poor Dad",
   "Almanack of Naval Ravikant",
   "Think and Grow Rich"
]
<List books={books} />

In Class components, props can be accessed as shown below:

//Child component (Class-based)
class List extends React.Component {
  render() {
    return (
      <ul>
        {this.props.books.map(item => <li key={item}>{item}</li>)}
      </ul>
    );
  }
}

There are two ways to access props in Functional components: If you are passing 'props' as a parameter in the function, then you can access the properties using props.books keyword and if you are directly passing the property name as a parameter to the functional component, then you can directly access the property without using props as prefix.

//Child component (Function-based)
const List  = (props) {
   return(
      <ul>
           {props.books.map(book=> <li key={book}>{book}</li>)}
      </ul>
   )
}

//Child component (Function-based)
const List  = ({books}) {
   return(
      <ul>
           {books.map(book=> <li key={book}>{book}</li>)}
      </ul>
   )
}

Props are also read-only, which means the component that receives the props cannot change them. This is helpful in keeping the code predictable and avoiding unexpected changes. If a component needs to update its data, it should use state instead.

In summary, props are a key part of React development and allow components to communicate and share data with each other. Instead of having to write the same code for multiple instances, you can create a single component that takes in different props and renders accordingly. Props make the code more reusable and predictable and are a must-know for any React developer.

Introduction to Children

Previously, you learned that you could pass props to and within a component. In React, the children property refers to the components or elements that are nested inside a parent component. The children property is a special prop that is passed to a component automatically, and it is available within the component through the "this.props.children" object.

The following code snippet shows exact difference between props and children.

books = [
   "Rich Dad Poor Dad",
   "Almanack of Naval Ravikant",
   "Think and Grow Rich"
]
<Books books = {books}>
   <h1>Name of the book</h1>
   <p>Name of the Author</p>
</Books>

Here books is passed as a property of the component and h1 & p are the children's of the component.

Use cases of children property

One common use case for children in React is for composing components. For example, you might have a Card component that takes in a title and content, and displays them as a card:
```
<Card>
<h2>My Title</h2>
<p>My Content</p>
</Card>
```
In this case, the h2 and p elements are the children of the Card component. You can access these children within the Card component and render them:
```
class Card extends React.Component {
render() {
 return (
   <div className="card">
     {this.props.children}
   </div>
 );
}
}
```
Another common use case for children is for passing in a function as a child, which is often referred to as a "render prop". In this pattern, the parent component passes in a function as a child that is then called by the child component. The child component can pass data to the render prop function, allowing for dynamic rendering based on the data.
```
<DataFetcher>
{data => (
 <ul>
   {data.map(item => (
     <li key={item.id}>{item.name}</li>
   ))}
 </ul>
)}
</DataFetcher>
```
In this example, the DataFetcher component fetches data and passes it to its child as a render prop. The child then renders the data in a list.

In conclusion, React props and children are two important concepts to understand when working with React components. Props allow components to receive data from their parent components, while children allow components to pass data to their child components. With the ability to pass data between components, React makes it possible to create complex and dynamic user interfaces with ease.

That is it for this article, this is the 3rd blog in the React.js Mastery series. If you got any value from this blog, give it a thumbs up and do subscribe to this blog to get more updates on the running series. Link to React.js Mastery series

Thanks a lot for reading till the very end! 😊

Tech Blogs