Using Class Functions in Props for Components

Evan Hicks

—July 12, 2022

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.

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.

Unsnag Your Mobile Monitoring: Why Teams Are Switching to Sentry

Using Class Functions in Props for Components

The Problem

The Solution

Further Reading

Unsnag Your Mobile Monitoring: Why Teams Are Switching to Sentry

Using Class Functions in Props for Components

The SolutionThe Solution

Further ReadingFurther Reading

The Solution

Further Reading