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

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;

0 comments:

Blogroll

Follow this blog by Email

Popular Posts