How to Pass Values Inside Attributes in React

Aug 19, 2020 • 6 Minute Read

Introduction

An attribute is a property of an element used to provide access to additional data required for that specific element to process the output. Each element in HTML consists of several attributes that act as a property for that element, followed by the appropriate value.

An attribute with a custom value is required when you want to alter the behavior of an element; hence, in React, you can use an in-built attribute of a component or create a custom attribute for the child component.

In this guide, you will learn how to pass static and dynamic values to the attribute and create a custom attribute for the child components.

Pass Static Values to an Attribute

Any attribute associated with the UI element needs the value to make it work. Thhe value can be anything, that is, static or dynamic.

If you have a fixed value for an element, then it calls static values that are stored in variables, and once you need to use that value, it consumes directly.

For example, say you have the <img> element in your React component, and the URL is stored in a state variable, as shown below.

      constructor() {
    super();
    this.state = {
      imageUrl: "your_image_url",
    };
}
    

You need to place one state variable inside the local state of the component imageUrl3, where you can put an appropriate path or URL of the image.

The state variable can be consumed directly with the element, as shown below.

      render() {
    console.log(this.props)
    return (
      <div>
        <img src={this.state.imageUrl} />
      </div>
    );
}
    

As you can see, this.state.imageUrl is accessed from the local state; hence, it’s called dynamic value to the src attribute and the imageUrl as a static value.

In the same way, it can also be applied to different elements, and a few examples are shown below.

      render() {
    console.log(this.props)
    return (
      <div>
        <a href={this.state.linkUrl} target="_blank">
          Hit me to reach Google
        </a>
        <input type="text" value={this.state.inputValue} />
      </div>
    );
}
    

Along with the <a> attribute, the static value used is this.state.linkUrl, and with the <input> control, this.state.inputValue is used as a static value to the attribute.

Pass Dynamic Values to an Attribute

So far in this guide, you have learned how to pass static values to an attribute. But that may require you to use frequently changed values along with the attribute.

For example, you may have one text input, and its element’s value updates as you change its value. The example below demonstrates this.

Create one state variable with a default value.

      constructor() {
    super();
    this.state = {
      fullName: "test"
    };
}
    

Now create the <input> element along with the required attributes.

      render() {
    return (
      <div>
        Enter full name :{" "}
        <input
          type="text"
          value={this.state.fullName}
          onChange={this.onValueChange}
        />
      </div>
    );
}
    

In the above example, the game-changer props are onChange(), used to update the existing value with the updated value.

      onValueChange = event => {
    this.setState({ fullName: event.target.value });
};
    

So, once you update the existing value in input control, it will be updated into the state, and the same value will appear in input control using the props, as shown below.

      value={this.state.fullName}

By consuming and updating the different state values, you can provide dynamic values to the element’s attribute.

Pass Values to an Event Attribute

Events are handy when user interaction is required in the existing page; thus, values can also be passed to an event attribute as with the in-built attributes of the elements, such as src, href, value, height, width, and so on.

You can define the values anywhere, such as the local state in the components, to pass the values to the event attribute. See below.

      constructor() {
    super();
    this.state = {
      student: {
        name: "heyfoo",
        age: "18"
      }
    };
}
    

Inside the state object of the component, student is a custom object created along with the key-value pair.

The next step is to implement an event attribute, such as onClick().

      render() {
    return (
      <div>
        <span onClick={() => this.setObjectValue(this.state.student)}>
          Send object
        </span>
      </div>
    );
}
    

Inside the <div>, there is one element created, <span>, along with the event attribute, called onClick, which triggers the event when the user clicks on the span element.

Once the user clicks on the element, you can pass any custom values as a function argument.

      onClick={() => this.setObjectValue(this.state.student)}

this.setObjectValue is a custom function that accepts one argument, and the static argument given is this.state.student.

To access the object from the event function, see below.

      setObjectValue(obj) {
  console.log(obj);
}
    

You can pass any static or dynamic values along with the event function, just like in the above example.

Conclusion

Attributes play an essential role when using HTML elements with static or dynamic values to achieve interactive results.

I hope this guide helps you to implement various ways to provide value to an attribute.