this undefined on setState

Question

I know this is a binding issue of some sort, but I'm not sure where to bind it. I tried a couple of different things.

The problem occurs on App._select when the user makes a dropdown box change. I want it to update the state to force a rerender of the Calendar component.

App

class App extends React.Component {
    constructor() {
        super();

        this.state = {
            room: "A"
        }
    }
    _select(e) {
        this.setState({
            room: e.target.value
        });
    }
    render() {
        return (
            <div>
                <Selector select={this._select}/>
                <Calendar room={this.state.room}/>
            </div>
        );
    }
};

export default App;

Selector

const Selector = (props) => {
    var items = API.rooms.map((item) => {
        return(
            <option value={item.room}>Study Room {item.room}</option>
        );
    });

    return (
        <div className="mat-section mat-section--m mat--color-primary">
            <div class="mat-section__body">
                <div class="custom-select">
                    <select onChange={props.select}>
                        {items}
                    </select>
                    <div class="custom-select__arrow"></div>
                </div>
            </div>
        </div>
    );      
}

export default Selector;

Answer 1

In the constructor

this._select = this._select.bind(this);

or es6 defined function

const _select = () => {....}

Answer 2

You need to bind this to _select() so it's defined inside your method!

constructor() {
    super();

    this.state = {
        room: "A"
    };

    this._select = this._select.bind(this);
}

If you use an arrow function the binding is done for you automagically, which is also an option.

Cheers.