Run Codemod

showcase/axes/dynamic-complex-edge-hints.js

@@ -70,12 +70,11 @@ export default class Example extends React.Component {
     this.state = {
       value: null
     };
-    this._rememberValue = this._rememberValue.bind(this);
   }
 
-  _rememberValue(value) {
+  _rememberValue = value => {
     this.setState({value});
-  }
+  };
 
   render() {
     const {value} = this.state;

showcase/axes/dynamic-crosshair.js

@@ -41,9 +41,6 @@ export default class DynamicCrosshair extends React.Component {
     this.state = {
       crosshairValues: []
     };
-
-    this._onMouseLeave = this._onMouseLeave.bind(this);
-    this._onNearestX = this._onNearestX.bind(this);
   }
 
   /**
@@ -52,17 +49,17 @@ export default class DynamicCrosshair extends React.Component {
    * @param {index} index Index of the value in the data array.
    * @private
    */
-  _onNearestX(value, {index}) {
+  _onNearestX = (value, {index}) => {
     this.setState({crosshairValues: DATA.map(d => d[index])});
-  }
+  };
 
   /**
    * Event handler for onMouseLeave.
    * @private
    */
-  _onMouseLeave() {
+  _onMouseLeave = () => {
     this.setState({crosshairValues: []});
-  }
+  };
 
   render() {
     return (

showcase/axes/dynamic-hints.js

@@ -36,19 +36,17 @@ export default class Example extends React.Component {
     this.state = {
       value: null
     };
-    this._rememberValue = this._rememberValue.bind(this);
-    this._forgetValue = this._forgetValue.bind(this);
   }
 
-  _rememberValue(value) {
+  _rememberValue = value => {
     this.setState({value});
-  }
+  };
 
-  _forgetValue() {
+  _forgetValue = () => {
     this.setState({
       value: null
     });
-  }
+  };
 
   render() {
     const {value} = this.state;

showcase/axes/dynamic-programmatic-rightedge-hints.js

@@ -48,12 +48,11 @@ export default class Example extends React.Component {
     this.state = {
       value: null
     };
-    this._rememberValue = this._rememberValue.bind(this);
   }
 
-  _rememberValue(value) {
+  _rememberValue = value => {
     this.setState({value});
-  }
+  };
 
   render() {
     const {value} = this.state;

showcase/axes/dynamic-simple-edge-hints.js

@@ -58,12 +58,11 @@ export default class Example extends React.Component {
     this.state = {
       value: null
     };
-    this._rememberValue = this._rememberValue.bind(this);
   }
 
-  _rememberValue(value) {
+  _rememberValue = value => {
     this.setState({value});
-  }
+  };
 
   render() {
     const {value} = this.state;

showcase/axes/dynamic-simple-topedge-hints.js

@@ -41,12 +41,11 @@ export default class Example extends React.Component {
     this.state = {
       value: null
     };
-    this._rememberValue = this._rememberValue.bind(this);
   }
 
-  _rememberValue(value) {
+  _rememberValue = value => {
     this.setState({value});
-  }
+  };
 
   render() {
     const {value} = this.state;

showcase/interaction/interaction-examples.js

@@ -154,11 +154,12 @@ export class LinkedCharts extends Component {
   constructor() {
     super();
     this.state = {index: null};
-    this.handleMouseOver = this.handleMouseOver.bind(this);
   }
-  handleMouseOver(index) {
+
+  handleMouseOver = index => {
     this.setState({index});
-  }
+  };
+
   render() {
     const {index} = this.state;
     return (

showcase/legends/searchable-discrete-color.js

@@ -37,19 +37,17 @@ export default class Example extends React.Component {
       ],
       searchText: ''
     };
-    this._clickHandler = this._clickHandler.bind(this);
-    this._searchChangeHandler = this._searchChangeHandler.bind(this);
   }
 
-  _clickHandler(item) {
+  _clickHandler = item => {
     const {items} = this.state;
     item.disabled = !item.disabled;
     this.setState({items});
-  }
+  };
 
-  _searchChangeHandler(searchText) {
+  _searchChangeHandler = searchText => {
     this.setState({searchText});
-  }
+  };
 
   render() {
     const {items, searchText} = this.state;

showcase/misc/synced-charts.js

@@ -35,7 +35,6 @@ export default class Example extends React.Component {
     this.state = {
       selectedIndex: null
     };
-    this._onChartMouseLeave = this._onChartMouseLeave.bind(this);
     this._onSeriesMouseOvers = [
       this._onSeriesMouseOver.bind(this, 0),
       this._onSeriesMouseOver.bind(this, 1)
@@ -46,9 +45,9 @@ export default class Example extends React.Component {
     this.setState({selectedIndex});
   }
 
-  _onChartMouseLeave() {
+  _onChartMouseLeave = () => {
     this.setState({selectedIndex: null});
-  }
+  };
 
   _getSeriesColor(index) {
     const {selectedIndex} = this.state;

showcase/plot/complex-chart.js

@@ -73,84 +73,78 @@ export default class Example extends React.Component {
         }
       ]
     };
-    this._nearestXHandler = this._nearestXHandler.bind(this);
-    this._mouseLeaveHandler = this._mouseLeaveHandler.bind(this);
-    this._updateButtonClicked = this._updateButtonClicked.bind(this);
-    this._legendClickHandler = this._legendClickHandler.bind(this);
-    this._formatCrosshairItems = this._formatCrosshairItems.bind(this);
-    this._formatCrosshairTitle = this._formatCrosshairTitle.bind(this);
   }
 
-  _updateButtonClicked() {
+  _updateButtonClicked = () => {
     const {series} = this.state;
     const totalValues = Math.random() * 50;
     series.forEach(s => {
       s.data = getRandomSeriesData(totalValues);
     });
     this.setState({series});
-  }
+  };
 
   /**
    * Event handler for onNearestX.
    * @param {Object} value Selected value.
    * @param {number} index Index of the series.
    * @private
    */
-  _nearestXHandler(value, {index}) {
+  _nearestXHandler = (value, {index}) => {
     const {series} = this.state;
     this.setState({
       crosshairValues: series.map(s => s.data[index])
     });
-  }
+  };
 
   /**
    * Event handler for onMouseLeave.
    * @private
    */
-  _mouseLeaveHandler() {
+  _mouseLeaveHandler = () => {
     this.setState({crosshairValues: []});
-  }
+  };
 
   /**
    * Format the title line of the crosshair.
    * @param {Array} values Array of values.
    * @returns {Object} The caption and the value of the title.
    * @private
    */
-  _formatCrosshairTitle(values) {
+  _formatCrosshairTitle = values => {
     return {
       title: 'X',
       value: values[0].left
     };
-  }
+  };
 
   /**
    * A callback to format the crosshair items.
    * @param {Object} values Array of values.
    * @returns {Array<Object>} Array of objects with titles and values.
    * @private
    */
-  _formatCrosshairItems(values) {
+  _formatCrosshairItems = values => {
     const {series} = this.state;
     return values.map((v, i) => {
       return {
         title: series[i].title,
         value: v.top
       };
     });
-  }
+  };
 
   /**
    * Click handler for the legend.
    * @param {Object} item Clicked item of the legend.
    * @param {number} i Index of the legend.
    * @private
    */
-  _legendClickHandler(item, i) {
+  _legendClickHandler = (item, i) => {
     const {series} = this.state;
     series[i].disabled = !series[i].disabled;
     this.setState({series});
-  }
+  };
 
   render() {
     const {series, crosshairValues} = this.state;

showcase/showcase-components/showcase-dropdown.js

@@ -27,12 +27,11 @@ class ShowcaseDropdown extends React.Component {
     this.state = {
       open: false
     };
-    this.toggleState = this.toggleState.bind(this);
   }
 
-  toggleState() {
+  toggleState = () => {
     this.setState({open: !this.state.open});
-  }
+  };
 
   render() {
     const {items} = this.props;

src/animation.js

@@ -57,8 +57,6 @@ class Animation extends PureComponent {
   constructor(props) {
     super(props);
     this._updateInterpolator(props);
-    this._renderChildren = this._renderChildren.bind(this);
-    this._motionEndHandler = this._motionEndHandler.bind(this);
   }
 
   componentWillUpdate(props) {
@@ -87,7 +85,7 @@ class Animation extends PureComponent {
    * @returns {React.Component} Rendered react element.
    * @private
    */
-  _renderChildren({i}) {
+  _renderChildren = ({i}) => {
     const {children} = this.props;
     const interpolator = this._interpolator;
     const child = React.Children.only(children);
@@ -116,13 +114,13 @@ class Animation extends PureComponent {
       // enforce re-rendering
       _animation: Math.random()
     });
-  }
+  };
 
-  _motionEndHandler() {
+  _motionEndHandler = () => {
     if (this.props.onEnd) {
       this.props.onEnd();
     }
-  }
+  };
 
   render() {
     const animationStyle = getAnimationStyle(this.props.animation);

src/make-vis-flexible.js

@@ -113,14 +113,13 @@ function makeFlexible(Component, isWidthFlexible, isHeightFlexible) {
         height: 0,
         width: 0
       };
-      this._onResize = this._onResize.bind(this);
     }
 
     /**
      * Get the width of the container and assign the width.
      * @private
      */
-    _onResize() {
+    _onResize = () => {
       const containerElement = getDOMNode(this[CONTAINER_REF]);
       const {offsetHeight, offsetWidth} = containerElement;
 
@@ -134,7 +133,7 @@ function makeFlexible(Component, isWidthFlexible, isHeightFlexible) {
         ...newHeight,
         ...newWidth
       });
-    }
+    };
 
     componentDidMount() {
       this._onResize();