Why do these similar react function passing statements work in different ways? [duplicate]

I have simple react page showing a Tree component and a series of fields. Right now I have the Tree hardcoded, but the fields as passed in as props. Also passed in as props are two parent callbacks. One for the Tree onSelect and one for the <input> onChange event. In both cases, the specific 'on' Event is a local function that in turn calls the parent's callback. This is all working....

In both cases the local functions reference the 'this' variable. In one local function, the Tree onSelect', I had to use the '.bind(this)' way but, in the other I did not. Both local functions can access the 'this.props.' values. However, if I remove the '.bind(this)' from the one used in the Tree component it fails. The 'this' is undefined.

I am new to react, so I'm just trying to figure what goes where. I'm guessing this has something to do with the Tree being a component and the <input> as something more basic?

Thanks for any insights...

import React, { Component } from "react"; import Tree from '@naisutech/react-tree' import './RecipePage.css'; class RecipePage extends Component { constructor(props){ super(props); this.state = { items: props.items,}; } onMySelect (props) { debugger; const items = this.state.items.slice(); console.log("HI" , props); } handleChange = ({ target }) => { debugger; const items = this.state.items.slice(); items[parseInt(target.id)+1].defaultValue = target.value; this.setState({items: items,}); var props = {items, target}; this.props.onInputChanged(props); // call the parent's update function send relavent data. }; render() { const t8000 = [ { label: 'Gauge 1', id: 1234, parentId: null, items: null }, { label: 'Target', id: 1236, parentId: 1234, items: null }, { label: 'Gage Factor', id: 5678, parentId: 1234, items: null }, { label: 'Gauge 2', id: 1235, parentId: null, items: null }, { label: 'Target', id: 2236, parentId: 1235, items: null }, ] const myTheme = { 'my-theme': { text: '#161616', bg: '#f1f1f1', highlight: '#cccccc', // the colours used for selected and hover items decal: 'green', // the colours used for open folder indicators and icons accent: '#f1f1f1' // the colour used for row borders and empty file indicators } } return( <div id="recipePage" className="recipeMenu" > <div className="closeButton" > <img src={require('./../CommonImages/closeButton_W_90x90.png')} height="90px" onClick={() => this.props.close()} alt="Menu buttons"></img> <Tree nodes={t8000} onSelect={this.onMySelect.bind(this)} theme = {'my-theme'} customTheme={myTheme} /> <form> <fieldset> <legend>this.state.items[0].label}</legend> {this.state.items.map((item, key) =>( <div className={item.show===1 && key!==0 ?"ShowInputs":"HideInputs"}> <label htmlFor={item.id}>{item.label} </label> <input type="text" name={item.id} id={item.id} value={item.defaultValue} onChange={this.handleChange} /> </div> ))} </fieldset> </form> </div> </div> ); } } export default RecipePage;