# Bind Class Functions in React Component Props

> Fix React class component binding errors by using arrow function wrappers or binding methods in the constructor to maintain the correct this reference

**URL:** https://sentry.io/answers/bind-functions-in-components/

---

## The Problem

Class functions are not bound to the class instance automatically, so if you attempt to use a class function that references `this` as a prop in another component, you will get an error.

```jsx
class Dog extends Component {
    constructor(props) {
        super(props);

        this.state = {
            name: "",
        }
    }

    handleNameChange(evt) {
        this.setState({name: evt.target.value})
    }

    render() {
        return (
            <div>
                <input onChange={this.handleNameChange} value={this.state.name} />
            </div>
        )
    }
}
```

When the input is changed and `handleNameChange` is called, it will throw an exception because it doesn't have the correct reference to `this`.

## The Solution

There are a lot of ways to fix this. It is even possible to install plugins/helpers that will fix this problem for you. An example of a Babel plugin that will fix this is here: https://babeljs.io/docs/babel-plugin-transform-class-properties.

One way of fixing this problem is to use a wrapper arrow function around the class method, so that the correct binding is maintained.

```jsx
render() {
    return (
        <div>
            <input onChange={evt => this.handleNameChange(evt)} value={this.state.name} />
        </div>
    )
}
```

Another way to address the issue is to bind the functions to the correct class instance when the class is first initialized.

```jsx
class Dog extends Component {
    constructor(props) {
        super(props);

        this.state = {
            name: "",
        }

        this.handleNameChange = this.handleNameChange.bind(this)
    }

    handleNameChange(evt) {
        this.setState({name: evt.target.value})
    }

    render() {
        return (
            <div>
                <input onChange={this.handleNameChange} value={this.state.name} />
            </div>
        )
    }
}
```

Now the class function will be correctly bound to the class instance when it's constructed, and there will be no issues with referencing `this` anywhere in the class function.

### Further Reading

If you're looking to get a deeper understanding of how [React application monitoring](https://sentry.io/for/react/) works, take a look at the following articles:

- [Debug tough front-end errors by giving Sentry more clues](https://blog.sentry.io/debug-tough-front-end-errors-sentry-clues/)
- [How Aumni keeps errors out of "userland"](https://sentry.io/customers/aumni/)
- [Setting up Sentry's React SDK](https://docs.sentry.io/platforms/javascript/guides/react/)

---

*Source: [sentry.io/answers/bind-functions-in-components/](https://sentry.io/answers/bind-functions-in-components/)*