DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for React Props Explained with Examples
Necati Γ–zmen for refine

Posted on • Originally published at refine.dev

React Props Explained with Examples

Author: Chidume Nnamdi

Β Introduction

React.js is the backbone of modern web development. Almost all companies use it. This is because React is easy to install and use, has strong community support, and is still actively maintained by Facebook.

It has a plethora of simple features that made it incredibly powerful. One of those features is Props, and we are going to learn what it is in this article.

Steps we'll cover:

Props in simple terms are used for communication among components in React app. Component communication is a very essential feature that any framework based on component-driven design should have. Most popular frameworks like Angular and Vuejs have their own way of components passing data to each other.

In a component-drive framework, every single unit of the UI is made up of components. Now, each of these components might need to communicate data among themselves, so you see that this becomes a necessity to have in frameworks.
For example, we have the below components

Root

|
v
CompA CompB

|      |
v      v
CompC CompD

Enter fullscreen mode Exit fullscreen mode

The Root component is root of the component tree, it renders the components CompA and CompB. They in turn render CompC and CompD. Let's say that CompD needs data to render and the data comes from CompB, we see that CompB must pass that data to CompD

Root

|
v
CompA CompB

|      | dataToRender: 90
v      v
CompC CompD  
Enter fullscreen mode Exit fullscreen mode

On the other hand, we might need to send data upward from a child to a parent.

Root

|
v
CompA CompB
        ^
|      | |dataToRender: 90
v      v
CompC CompD
Enter fullscreen mode Exit fullscreen mode

Props in React

Props are the main backbone of Reactjs, it is one of the basic features that made Reactjs awesome and powerful. Props in Reactjs are used for one-way and bidirectional way communication in Reactjs components.

Think of props as arguments to functions. Functions in JS are a group of codes that perform a task. We can have a function that returns the summation of 1 and 2:

function sum() {
  return 1 + 2;
}
Enter fullscreen mode Exit fullscreen mode

This function returns the summation of 1 and 2. We can make this function to be flexible enough not to sum only 1 and 2 but to sum any two numbers. We will make it to accept two arguments.

function sum(firstNumber, secondNumber) {
  return firstNumber + secondNumber;
}
Enter fullscreen mode Exit fullscreen mode

Here, now we can add two numbers:

sum(1, 2); // 3
sum(90, 23); // 113
Enter fullscreen mode Exit fullscreen mode

We are using the sum function passing to it what we need it to work with.
This is the same concept as "props" in React components. Components in React are JavaScript functions and ES6 classes. The arguments we pass to functions are now "props" in React Components.

React Components written as functions are known as Functional Components. While the ES6 components are known as Class Components.

Functional Components are basically JavaScript functions. Let's see an example:

function FunctionalComponent() {
  return <div>Hello</div>;
}
Enter fullscreen mode Exit fullscreen mode

We can now render it like this:

<FunctionalComponent />
Enter fullscreen mode Exit fullscreen mode

Very simple.

Now, to pass props to a React Component, we pass them like attributes on an HTML element:

<img src="./image.jpg" width="120" height="90" />
Enter fullscreen mode Exit fullscreen mode

The attributes here are src, width, and height. The img uses them to render an image. So these attributes are just like passing arguments to a function.

So similar to the thing we do on a React component:

<ReactComponent data1="Hi" data2={20} />
Enter fullscreen mode Exit fullscreen mode

The props here in the ReactComponent is data1 and data2. So, the question is how do we get to access and use them in the ReactComponent?
Now, React gathers all the "attributes" in the Component and adds them to an argument object it passes to the Component it is being rendered.

function ReactComponent(props) {}
Enter fullscreen mode Exit fullscreen mode

The props argument is an argument that React passes to its Components when they are being rendered(and updated too). The name is not just to be props, it can be anything. I was following naming conventions, the props name tells us it's a prop/property passed to the Component.

So, the "attributes" passed to the ReactComponent can be accessed as properties in the props argument. As we said before the props argument is an object.

function ReactComponent(props) {
  typeof props; // "object"
  return null;
}
Enter fullscreen mode Exit fullscreen mode

Now, we can access the data1 and data2 in the props

function ReactComponent(props) {
  const data1 = props.data1;
  const data2 = props.data2;
  return null;
}
Enter fullscreen mode Exit fullscreen mode

We can display the props:

function ReactComponent(props) {
  const data1 = props.data1;
  const data2 = props.data2;
  return (
    <div>
      <span>Data 1: {data1}</span>
      <span>Data 2: {data2}</span>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

We can convert our first example of the sum function as a React Component. This is it:

function Sum() {
  return <div>{1 + 2}</div>;
}
Enter fullscreen mode Exit fullscreen mode

We render it:

<Sum />;

// <div>3</div>
Enter fullscreen mode Exit fullscreen mode

Let's make accept two numbers to sum and then display the result:

function Sum(props) {
  const firstNumber = +props.firstnumber;
  const secondNumber = +props.secondnumber;

  const result = firstNumber + secondNumber;

  return (
    <div>
      <span>
        Summing {firstNumber} and {secondNumber}{" "}
      </span>
      <span>{result}</span>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

From this, we know now that we will pass the numbers we want to sum to the Sum component in firstNumber and secondNumber props.

//let's display the summation of 1 and 2:

<Sum firstNumber={1} secondNumber={2} />;
Enter fullscreen mode Exit fullscreen mode

The display will be this:

<div>
  <span> Summing 1 and 2 </span>
  <span>3</span>
</div>;
Enter fullscreen mode Exit fullscreen mode

We can pass any data type as props in React components: object, array, boolean, number, string, function, etc.

Object

Yes, it is possible to pass objects to React components. Let's say you have the below object in a parent component and want to pass it to a child component so it can display the object's property values.

const user = {
  id: 0,
  name: "Chidume Nnamdi",
  age: 54,
};

Enter fullscreen mode Exit fullscreen mode

We pass it to the component like this:

<DisplayUser user={user} />
Enter fullscreen mode Exit fullscreen mode

Very simple.

Now, we can access the user prop in the DisplayUser component in the props object.

function DisplayUser(props) {
  const user = props.user;

  return (
    <div>
      <p>
        Name: <span>{user.name}</span>
      </p>
      <p>
        Age: <span>{user.age}</span>
      </p>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Small dev teams love this React framework!

Meet the headless, React-based solution to build sleek CRUD applications. With refine, you can build complex projects without having advanced frontend skills.

Try refine to rapidly build your next CRUD project, whether it's an admin panel, dashboard, internal tool or storefront.


refine blog logo


Passing Array to React Component

Let's see how to pass an array to React components via "props".

Let's say we have this array of users:

const users = [
  {
    id: 0,
    name: "Chidume Nnamdi",
    age: 54,
  },
  {
    id: 1,
    name: "Karim",
    age: 24,
  },
  {
    id: 2,
    name: "Bruno",
    age: 45,
  },
  {
    id: 3,
    name: "Ola Brown",
    age: 24,
  },
];
Enter fullscreen mode Exit fullscreen mode

We have a component that displays a list of users. We want this component to receive an array of users via a users props. We pass the array to it like this:

<DisplayUsers users={users} />
Enter fullscreen mode Exit fullscreen mode

Now, let's get the users from the props object and display the users.

function DisplayUsers(props) {
  const users = props.users;

  return (
    <div>
      {users.map((user) => (
        <div>
          <p>
            Name: <span>{user.name}</span>
          </p>
          <p>
            Age: <span>{user.age}</span>
          </p>
        </div>
      ))}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Yes, simple.

Passing Function to React Component

This may seem a bit complex, but yes, we can actually pass a function via props to a component.

Most function props are used to communicate data from a child component to a parent component. If you delve deep into Angular that's what it uses under the hood in its @Output decorator to pass data from child component to parent component.

Let's see a simple example:

 function func() {
  console.log("Yes, I am a function");
}
Enter fullscreen mode Exit fullscreen mode

Now, we can pass this function to a component, by setting its name as the value in props on a component.

<Component funcProp={func} />
Enter fullscreen mode Exit fullscreen mode

Now, we can get this function in funcProp in the props argument.

function Component(props) {
  const funcProp = props.funcProp;
  funcProp();
  return null;
}
Enter fullscreen mode Exit fullscreen mode

We will see Yes, I am a function in our Console tab.

Default Props in React

Default props are props that the Component will fall back to when the props are not passed to the component.

Think of default props as default values set on an argument in a function.

Let's say we have this function:

function concat(str1, str2) {
  return str1 + str2;
}
Enter fullscreen mode Exit fullscreen mode

Let's say we call the function passing only one param for the str1:

concat("Hello");
Enter fullscreen mode Exit fullscreen mode

The second argument str2 will be undefined and will get this result: Helloundefined. This is a bad result, we don't want undefined concatenated in our string if any of the arguments are missing. If any of the arguments are missing the only argument available should be concatenated with an empty string. So to do this we will set a default value to the str2 like this:

function concat(str1, str2 = "") {
  return str1 + str2;
}
Enter fullscreen mode Exit fullscreen mode

So now this:

concat("Hello");
Enter fullscreen mode Exit fullscreen mode

will return this:

Hello
Enter fullscreen mode Exit fullscreen mode

We can also set the default value on the str1 in case no arguments are passed when the function is called:

function concat(str1 = "", str2 = "") {
  return str1 + str2;
}
concat();
// ""
Enter fullscreen mode Exit fullscreen mode

This is exactly what default props are all about. Let's say that this is our DisplayUser component:

function DisplayUser(props) {
  const user = props.user;

  return (
    <div>
      <p>
        Name: <span>{user.name}</span>
      </p>
      <p>
        Age: <span>{user.age}</span>
      </p>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

That, we did not pass any user object to it via its user props.

<DisplayUser />
Enter fullscreen mode Exit fullscreen mode

This will throw an error and will probably crash the application. So you see because of missing props the whole application went down. This is where default props come in to help.

Let's set default props on DisplayUser component. This is done by using the static property defaultProps.

function DisplayUser(props) {
  //...
}
Enter fullscreen mode Exit fullscreen mode

Inside this object, we will set the default values of the props in the DisplayUser component.

DisplayUser.defaultProps = {
  user: {
    name: "",
    age: 0,
  },
};
Enter fullscreen mode Exit fullscreen mode

To see that we set the user props inside the defaultProps object. This is will be the value of the user props when it is not passed to the component.

Let's see it in action:

<>
  <DisplayUser />
  <div>
    <p>
      Name: <span></span>
    </p>
    <p>
      Age: <span>0</span>
    </p>
  </div>
</>;
Enter fullscreen mode Exit fullscreen mode

The application didn't crash this time.


discord banner

React children prop

The children prop is a special prop passed by React itself to components. This children contains the child node of a component. Let's see an example:

<DisplayUser user={user}>
  <>
    <Hello />
    <div>I am a child</div>
  </>
</DisplayUser>;
Enter fullscreen mode Exit fullscreen mode

We see that we have some elements rendered in between the DisplayUser component.

These elements are passed to the DisplayUser component in the children property of the props object.

 function DisplayUser(props) {
  const user = props.user;
  const children = props.children;

  return ( // )
}
Enter fullscreen mode Exit fullscreen mode

This children is a React Fiber Node that renders the element in between a component's tag. Let's render the child elements:

function DisplayUser(props) {
  const user = props.user;
  const children = props.children;

  return (
    <div>
      <p>
        Name: <span>{user.name}</span>
      </p>
      <p>
        Age: <span>{user.age}</span>
      </p>
      {children}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

This will render this:

 <div>
  <p>
    Name: <span>{user.name}</span>
  </p>
  <p>
    Age: <span>{user.age}</span>
  </p>
  <div>Hello</div>
  <div>I am a child</div>
</div>;

Enter fullscreen mode Exit fullscreen mode

State vs Props

We have learned deep down what props are. Now, people often tend to confuse props with the state in React components. They differ completely, let's see their differences.

Props as we know are passed to components, and from one component to another. State on the other hand is not passed from one component to the other, it is passed within the component only. The state is local data used and maintained by one component only. Two components cannot use or maintain one state.

Props are immutable, which means that they cannot be modified. Once a props is passed to a component, that component cannot change the value of the props. State on the reverse is mutable. States can be changed at will in the component.

So props are read-only while states are read-and-write.
Props are used for communication uni-directional or bi-directional, while the state is used to render dynamic data in the component.

Conclusion

We have learned a great lot from this article.
We started by introducing the concept of component-driven design in JS frameworks and components communication in them. From there, we introduced Props in React and learned about these basic concepts.

Next, we learned examples of how to use props, and how to access them from the components. We learned also how to pass other data types(object, array, function, etc) via props to components. Next, we learned about default props and children props, how they work, and all that. Finally, we saw the comparison between state and props in React.

Top comments (0)

Let's Get Hacking

Join the DEV x Linode Hackathon 2022 and use your ingenuity and creativity to build using Linode.

β†’ Join the Hackathon <-