Why is my function considered undefined?

Question

Why is my function onInputBlur being considered undefined? I imagine this is incredibly dumb, but I've tried doing a binding in the constructor and other variations.

import React from 'react';

class StateSelect extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    onInputBlur = (event) => {
        let choiceType = event.target.id.toString()
        let choice = event.target.value

        console.log(this.props.state)
    }

    render() {
        const { styles } = this.props
        return (
            <div style={styles.formInput}>
                <select id="state" name="state" onChange={this.props.saveInputVal} onBlur={onInputBlur} style={styles.input}>
                    <option value disabled selected>State</option>
                    {Object.keys(States).map((key) => {
                        return ( <option key={key} value={key}>{States[key]}</option> )
                    })}
                </select>
            </div>
        )
    }
}

Answer 1

You need write onBlur={this.onInputBlur} . You can access class property using this keyword

Snippet

render() {
    const { styles } = this.props
    return (
      <div style={styles.formInput}>
        <select id="state" name="state" onChange={this.props.saveInputVal} onBlur={this.onInputBlur} style={styles.input}>
          <option value disabled selected>State</option>
          {Object.keys(States).map((key) => {
            return ( <option key={key} value={key}>{States[key]}</option> )
          })}
        </select>
      </div>
    )
}