Cleaner React with Class Fields.

Now, write class methods that are automatically bound to the class instance without any overhead syntax.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class App extends React.Component {

	constructor(props) {
  	super(props);
    this.state = {
    	workDone: 'Work done!',
      array: [1, 2, 3, 4, 5]
    };
  }
  
  doWork = item => () => {
		alert(`${this.state.workDone} - ${item}`);
	}


	render() {
  	  return this.state.array.map((item, index) => (
    	        <button
                  onClick={this.doWork(item)}
                  key={item}
              >
                  Do Work - {item}
              </button>
   	 	));
	}
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);