Debugging es6 in create-react-app

Without using something like let that = this you can use functions for callbacks in JSX properties in a couple of different ways.

If you want to use it directly as an anonymous function you can use like that:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,
    };
  }

  render() {
    return (
        <button onClick={(function () {
          this.setState(prevState => ({ value: prevState.value + 1 }));
        }).bind(this)}>
        Click me
        </button>
    );
  }
}

You are binding the function to this here directly. I haven't seen any example of that. Generally people use something like this:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({ value: prevState.value + 1 }));
  }

  render() {
    return (
        <button onClick={this.handleClick}>
        Click me
        </button>
    );
  }
}

Here we are using our callback function as a reference and binding it in out constructor.

Another alternative is using an arrow function. For this situation you don't need to bind your function. Also, we are using class-fields here, hence no need to use constructor at all.

class App extends React.Component {
  state = { value: 0 };
  handleClick = () => {
    this.setState(prevState => ({ value: prevState.value + 1 }));
  }

  render() {
    return (
        <button onClick={this.handleClick}>
        Click me
        </button>
    );
  }
}

In a callback for JSX props this' scope changes, it does not refer to the class anymore. So either you will bind it to this or use an arrow function which does not change the scope of this.

Sometimes debug tools can struggle to correctly place breakpoints for lambda functions in these cases. Perhaps you could achieve the same effect by temporarily adding debugger to your source code as follows, to force the breakpoint to hit:

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value: 0,
        };
    }

    render() {

        return (
            <div className="App">
                <header className="App-header" onClick={() => {

                    debugger; // ADD THIS: It will act as a breakpoint and force the developer-tools to break so you can step through the code

                    this.setState({value: this.state.value + 1})
                }}>
                    <img src={logo} className="App-logo" alt="logo"/>
                    <h1 className="App-title">Welcome to React, the state is {this.state.value}</h1>
                </header>
                <p className="App-intro">
                To get started, edit <code>src/App.js</code> and save to reload.
                </p>
        </div>);
    }
}

export default App;