Set Attribute, Remove Attribute, Read Attribute Using ReactJS

Here I have given example in ES6. When the state of component changes, then ReactJS will re render the component. By using this concept, we can manipulate attributes on the go

Click here to see DEMO Download Code

To Run Example Code

execute below commands

npm install
npm start

now open index.html in browser

Example Component

Observe below component. Whenever user clicks on buttons, respective attribute manipulation actions will happen. Here data-val attribute can be changed by user given value. You can read attributes by giving reference too. Observe below highlighted code

import React from 'react'
import RemovableComponent from './RemovableComponent'

class ExampleApplication extends React.Component {

  constructor(props) {
    super(props);
    this.emptyComponent = this.emptyComponent.bind(this);
    this.removeComponent = this.removeComponent.bind(this);
    this.resetComponent = this.resetComponent.bind(this);
    this.state = {
       empty: false,
       remove: false
    };
  }

  emptyComponent() {
    this.setState({
      empty: true,
      remove: false
    });
  }

  removeComponent() {
    this.setState({
      empty: false,
      remove: true
    });
  }

  resetComponent() {
    this.setState({
      empty: false,
      remove: false
    });
  }

  render() {
    return (
      <div>
        <RemovableComponent empty={this.state.empty} remove={this.state.remove}/><br/><br/>
        <button onClick={this.emptyComponent}>empty component</button>
        <button onClick={this.removeComponent}>remove component</button>
        <button onClick={this.resetComponent}>reset component</button><br/>
      </div>
    );
  }

}

ExampleApplication.propTypes = {
}

ExampleApplication.defaultProps = {
}

export default ExampleApplication;

→	Convert XML or JSON to Java Pojo Classes
→	Change Icon Color Online

SodhanaLibrary