Sentry Answers>React>

Using Class Functions in Props for Components

Using Class Functions in Props for Components

Evan Hicks

—

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.

Click to Copy
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/en/babel-plugin-proposal-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.

Click to Copy
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.

Click to Copy
class Dog extends Component {
    constructor(props) {
        super(props);

        this.state = {
            name: "",
        }

        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 works, take a look at the following articles:

  • Sentry BlogHow to identify fetch waterfalls in React
  • Syntax.fmReact Server Components
  • Syntax.fmWhy the jQuery Creator Uses React and Typescript
  • Syntax.fmListen to the Syntax Podcast
  • Sentry BlogReact Native Debugging and Error Tracking During App Development
  • Syntax.fmDiscussion on building native iOS and Android apps with React Native
  • SentryReact Error & Performance Monitoring
  • Sentry BlogFixing memoization-breaking re-renders in React
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.