Simple way for managing your props in React
Tags: react
Published: 2019-10-26 15:23:45

---
title: Simple way for managing your props in React
published: true
description: 
tags: react
cover_image: https://thepracticaldev.s3.amazonaws.com/i/fv10talys64iwwi701hn.png
---

If you have been developing an application that uses React, you might run into a situation where it becomes difficult or messy to manage the component props. A common scenario would be passing global data such as authenticated user details to deeply nested components.

Below is a simple example to demonstrate the passing of props from a top level component containing the `userDetails` all the way to the child component that renders the details on a user profile page.

We have an App component with the authenticated user details (global data). For simplicity, we will define the `userDetails` as a constant. We will have a component that look something similar to the following:
```javascript
App.js

const App = () => {  
  const userDetails = {
    name: "User1", 
    address: "NY", 
    status: "active", 
    dateJoined: "January 2019"
  }
  return (
    <Profile userDetails={userDetails}/>
  );
}
```

The `App` component will render the `Profile` component which will be the user profile page. In order for the `userDetails` to be available on our profile screen, we pass it as a prop to the `Profile` component. 

Our `Profile` component will like the following: 
```javascript
class Profile extends Component {
    render() {
        const { userDetails } = this.props
        return (
            <React.Fragment>
                <PrimaryDetailsCard userDetails={userDetails} />
                <SecondaryDetailsCard userDetails={userDetails} />
            </React.Fragment>
        )
    }
}
``` 

`Profile` component will render `PrimaryDetailsCard` and `SecondaryDetailsCard` component which carries diffrent kind of CSS styles for rendering different kinds of user details for the profile page. We once again have to pass `userDetails` as a prop to `PrimaryDetailsCard` and `SecondaryDetailsCard` component. 

Example of `PrimaryDetailsCard` and `SecondaryDetailsCard` code:
```javascript
PrimaryDetailsCard.js
class PrimaryDetailsCard extends Component {
    render() {
        const { userDetails } = this.props
        return (
            <div>{userDetails.name}, {userDetails.dateJoined}</div>
        )
    }
}

SecondaryDetailsCard.js
class SecondaryDetailsCard extends Component {
    render() {
        const { userDetails } = this.props
        return (
            <div>{userDetails.address}</div>
        )
    }
}
```

The passing of props makes it hard to manage and it will get even more complex.

## React.Context to the rescue!

We can avoid the hassle of passing props to multiple nested components especially if they do not need to know the details. We can use React.Context for that!

We start by declaring a `UserContext` in a new file using the built in function `const UserContext = React.createContext({});`.

Inside our example `App.js`, simply import the `UserContext` and use `UserContext.Provider` to wrap all the components. 
The provider simply allows the children component to receive the context value.
```javascript
import UserContext from './UserContext';

const App = () => {
  const userDetails = {
    name: 'User1',
    address: 'NY',
    status: 'active',
    dateJoined: 'January 2019',
  };
  return (
    <UserContext.Provider value={userDetails}>
      <Profile />
    </UserContext.Provider>
  )
};
```
Now that we have `UserContext.Provider` set up with the `userDetails` set as its value, our `Profile` component does not need any knowledge regarding `userDetails`, we can simply remove the codes relating to the `userDetails`.

```javascript
class Profile extends Component {
  render() {
    return (
      <React.Fragment>
        <PrimaryDetailsCard />
        <SecondaryDetailsCard />
      </React.Fragment>
    );
  }
}
```

The next part would be obtaining the context value inside our child component that are interested in the values. Using `PrimaryDetailsCard` as an example:
```javascript
import UserContext from './UserContext';

class PrimaryDetailsCard extends Component {
  render() {
    return (
        <UserContext.Consumer>
            {(userDetails) => {
                return(
                    <div>
                    {userDetails.name}, {userDetails.dateJoined}
                  </div>
                )
            } }
        </UserContext.Consumer>

    );
  }
}
```
We import the `UserContext` and wrap our component with `UserContext.Consumer` component. The `Consumer` component will enable our component to access the value which was previously set by the `Provider`. With that, we have organized our props neatly while displaying our User details on the profile page as usual!

You can learn more about `React.Context` [here](https://reactjs.org/docs/context.html) 
You can checkout my sample code on:
1) [Without React.Context](https://github.com/sooyang/react-context-example/commit/8f186fc54cb8d7e2b2be85a1808d85edbf5f1a83)
2) [Using React.Context](https://github.com/sooyang/react-context-example/commit/824dbfb720cebf66f936f16264b83389307d8b84)