Props in React

In this article, we will learn about a very popular and interesting concept of React. We will learn about props, their features, and how to use them. React allows us to pass information to a Component using something called props. Props are basically a kind of global variable or object.

React has a different approach to data flow & manipulation than other frameworks. To understand how props work, first, we need to have a general idea of the components. To understand the concept of props we first need to understand the concept of components.

What are the components in react?

Components help us to split the UI into independent, reusable pieces, and implement for each component individually. Or in simple words, we can say that components are like JavaScript functions that accept arbitrary inputs and return React elements describing what should appear on the screen.

Here the arbitrary input provided is nothing but props. The inputs that we provide to functions known as components in React are the properties that we pass to the functions and properties are known as props when thinking in React.

What are Props in React?

React has special objects called props that are used to transport data from one component to another. React’s data flow between components is uni-directional (from parent to child only). It is not possible to pass data from child to parent, or to components at the same level by using the concept of props. Props are immutable so we cannot modify the props from inside the component.

When we declare a component as a function or a class, we cannot modify its own props.

The functions that do not attempt to change the inputs provided and always return the same result for the same inputs are called “pure” functions. contradictory, impure functions change the inputs provided and return results.

As per React’s documentation, all React components must act like pure functions with respect to their props.

Default Props

It is not necessary to always add props in the render element We can also set default props in the component constructor.

How to pass props?

We can pass data from one component to another. Let’s consider two components Parents and Children to explain this. Let’s assume that we want to pass some information as props from our Parent component to the Child component. In this case, we can pass as many props as much as we want to any component.

Let’s have a look at a simple example:

const ParentComponent = () => {        
	return (         
		<ChildComponent name="First Child" />     
	); 
} 

const ChildComponent = (props) => {     
    return <p>{props.name}</p>;  
}; 

We need to assign the value that we need to pass to some variable, we need to get data from the parent component and assign it to a child component’s “prop” attribute.

<ChildComponent name="First Child" /> 

In the example we can see above, “Name” is a prop defined here and it contains “First Child” as text data. In this way, we can pass the data with props as pass some arguments to a function.

const ChildComponent = (props) => {   
  // statements 
}; 

Accessing props

We can pass props to any component as we declare attributes for any HTML tag.

<ChildComponent name="First Child" />  

Here we have passed Name as props in ChildComponent. The string “First Child” is the value that we need to pass to the ChildComponent. We can access any props inside from the component in which the props are passed I.e. ChildComponent. The prop “name” can be accessed as shown below:

Syntax:

props.propName 

Example:

props.name

When working with class components we access props as ‘this.props’ is a kind of global object which stores all of a component’s props. The propName, that is the names of props are keys of this object.

The React documentation suggests: “A common pattern is to create several stateless components that just render data and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.”

Difference between Props and State

Conclusion

Props are used for passing data, not for manipulating it. Props are mainly used for passing data from component to component. getDefaultProps is invoked once and cached when the component is created. Props are immutable and should only be sent from parent to child component.