How to Pass Static Data into a React Component

Jul 23, 2020 • 6 Minute Read

Introduction

Static data can be a source for various purposes, such as displaying static information, maintaining app-wide config information, and rendering static data along with JSX elements. React supports props and state, which is the backbone of managing the static and dynamic data across the components. Through this guide, you will learn how to pass the static data to the components such as props and state data.

Pass State Data to the Component

The state is a plain JavaScript object that consists of a key-value pair as object data. Hence, the state data could be passed from parent to child component and vice versa.

The first approach is to pass the state data from parent to child component, as explained below.

Create the static data into the state object like this.

      constructor() {
    super();
    this.state = {
      name: "hey123",
      age: "30",
      occupation: "designer"
    };
}
    

And pass the state values to the child component as demonstrated below.

      render() {
    return (
      <div>
        <p>2. Pass data using state</p>
        <hr />
        <ChildComponent
          name={this.state.name}
          age={this.state.age}
          occupation={this.state.occupation}
        />
      </div>
    );
}
    

From the child component, it could be accessible as props.

      render() {
    const { name, age, occupation } = this.props;
    return (
      <div>
        <p>Student detail :</p>
        <hr />
        <table>
          <tr>
            <td>Name :</td>
            <td>{name}</td>
          </tr>
          <tr>
            <td>City :</td>
            <td>{age}</td>
          </tr>
          <tr>
            <td>College :</td>
            <td>{occupation}</td>
          </tr>
        </table>
      </div>
    );
}
    

All the state values are extracted from the props and used for rendering the data along with the table.

      const { name, age, occupation } = this.props;

The next approach to pass the static data from the child to the parent component could be made by triggering the event.

From the child component, create one button along with the function name coming from the parent component as demonstrated below.

      <button
    onClick={this.props.onButtonClick({
        name: "test123",
        age: "25"
    })}
    >
    Click to send
</button>
    

Once you click the button, the object can be accessed from the parent component. For that, you need to pass the function name to the child component.

      render() {
    return (
      <div>
        <ChildComponent
          // pass action to child
          onButtonClick={this.onButtonClick}
        />
      </div>
    );
}
    

And the function of the parent component should look like the example below.

      onButtonClick(data) {
    console.log("Data coming from child component :", data)
}
    

Pass Props Data to the Component

Props and states are comparatively equal, but the significant difference is that the props value cannot be modified, which means that the props value is immutable.

If you use state data in your component and pass it to the child component, then it becomes the props for the child component.

Create one state object called student as mentioned below.

      constructor() {
    super();
    this.state = {
      student: {
        name: "test123",
        city: "testcity",
        college: "xyzcollege"
      }
    };
}
    

Pass the student object from the state to the child component.

      render() {
    return (
      <div>
        <p>Pass data using props</p>
        <ChildComponent student={this.state.student} />
      </div>
    );
}
    

As you can see, there is one added property being used, called student, along with the child component.

      <ChildComponent student={this.state.student} />

Once you pass the data to the child component, it will become immutable, but it could be used from the child component as a data source as demonstrated below.

      render() {
    const { student } = this.props;
    return (
      <div>
        <p>Student detail :</p>
        <hr />
        <table>
          <tr>
            <td>Name :</td>
            <td>{student.name}</td>
          </tr>
          <tr>
            <td>City :</td>
            <td>{student.age}</td>
          </tr>
          <tr>
            <td>College :</td>
            <td>{student.occupation}</td>
          </tr>
        </table>
      </div>
    );
}
    

This is the standard approach you can follow to pass the data as props to various components across a React app.

Other Approaches

The state and props are typical for data manipulation in and out of the component, but there are other ways to pass the static data to the component, which are given below.

Redux global state management (if components do not have a relationship)
JavaScript window object
React context API

Conclusion

Passing the static data to the components is a vital part of any app that needs the source data for the rendering and to manipulate the elements based on its value.

State and props are one of the conventional approaches to play around the static and dynamic data across the components. I hope it helps you to understand the strategy to implement and use static data. Keep learning.