Accessing Data through Props with Known Key Names in React.js

Aug 6, 2020 • 6 Minute Read

Introduction

Props are an ordinary object of React that follow the immutable properties. This simply means that you cannot change their value throughout the component. Props and states are in the form of an object, which contains the number of key-value pairs that could be used to render the value of the objects.

Through this guide, you will learn the different approaches to access the key-value pair of the props and state objects in a React component.

Access Standard State Object in the Component

The state and props in React are always in an object format. This means that the value could be accessed from the state and props via key-value pair.

To access the normal state object, you can use the key name from the object. The state object will look as shown below.

      constructor() {
    super();
    this.state = {
      employee: {
        firstname: "FirstName123",
        lasttname: "LastName123",
        age: "31",
        city: "xyzcity",
        department: "marketing",
        joiningyear: "2015"
      }
    };
}
    

There are several key-value pairs under the employee object, so if you want to get access to the actual employee state object, it can be accessed as demonstrated below.

      render() {
    const { employee } = this.state;

    return (
      <div>
        Access Normal Object
        <hr />
        <table>
          <tr>
            <td>First Name :</td>
            <td>{employee.firstname}</td>
          </tr>
          <tr>
            <td>Last Name :</td>
            <td>{employee.lasttname}</td>
          </tr>
          <tr>
            <td>Department :</td>
            <td>{employee.department}</td>
          </tr>
        </table>
      </div>
    );
}
    

There is one primary statement inside the render() function where the employee object was accessed from the state object.

      const { employee } = this.state;

Hence, the employee object could be accessed by its key as explained below.

      <tr>
    <td>First Name :</td>
    <td>{employee.firstname}</td>
</tr>
    

You just need to make use of the object name followed by the key name to access the key-value pair of the state object.

Access the Array of an Object from the Props

Previously, you have accessed the state object’s key-value pair, but the props object can also be accessed the same way.

For the change, you will get access to the array of objects and not the simple object, which contains a key-value pair.

Create a new array of objects as demonstrated below.

      constructor() {
    super();
    this.state = {
      employees: [
        {
          firstname: "FirstName123",
          lasttname: "LastName123"
        },
        {
          firstname: "FirstName456",
          lasttname: "LastName456"
        }
      ]
    };
}
    

As seen, there are two different objects inside the employee array, so the desired task is to pass an array of objects to the child component and consume it.

To render values inside the array of the object, you can make use of the map() function that accepts the array, as demonstrated below.

      render() {
    const { employees } = this.state;

    return (
      <div>
        <div>
          {employees.map(employee => (
            <p key={employee.firstname}>
              {employee.firstname} : {employee.lasttname}
            </p>
          ))}
        </div>
      </div>
    );
}
    

In the above example, the employee is an array of objects coming from the state object, and by using the map() function the iteration happens, and values are rendered.

Access Props Data with the Known Key Name Using Object.entries()

The Object.entries() is another way to extract the number of key-value pairs from the props object.

Below is some simple syntax.

      Object.enteries(object_name)

You need to pass the name of the object along with the function Object.entries(), which gets the key-value pair, and afterward you can use those known keys and values as demonstrated below.

      render() {
    const { employee } = this.state;

    return (
      <div>
        <div>
          {Object.entries(employee).map(([key, value]) => {
            return (
              <div>
                {key} = {value}
              </div>
            );
          })}
        </div>
      </div>
    );
}
    

If you want to get access to only a specific key-value pair, then it could be done as explained below.

      <div>
    {Object.entries(employee).map(([key, value]) => {
        return (
            <div>
                {key === "firstname" && key} = {value}
            </div>
        );
    })}
</div>
    

One added condition is used here to check whether the key is required to render in the DOM. Otherwise, the key would not be rendered.

These are the three different approaches you can choose from to render the known key-value pair from props or any other objects to React.

Conclusion

Objects are the container property that contains a key-value pair. Hence, the state and props in React are the objects which could be consumed with known key names.

While developing apps with React, three different approaches that will make your life easier are using a normal props object, using an array of objects, and using Object.entries. I hope you find this useful, happy learning!

Learn More

Explore these React courses from Pluralsight to continue learning: