What is the purpose of this.props.onChange()? - reactjs

Question

From the react quickstart: https://facebook.github.io/react/docs/lifting-state-up.html
The purpose of the line:
handleChange(e) {
this.props.onChange(e.target.value);
}
was never explained and I can't figure out what it does. Is onChange a built in method of props? I thought props was simply just parameters for components, why can it invoke functions?

Answer 1

I came here with the same question, but I understand it now (at least I think I do). The issue is that onChange in the Calculator class is a prop, but in the render portion of the class TemperatureInput, it's an event listener. Sometimes I see this in React, where the same name is used on two completely different things, and I find it can easily create confusion. Here's what happens in the following code block:
class TemperatureInput extends React.Component {
handleChange(e) {
this.props.onChange(e.target.value); **(2)**
}
render() {
return (
<fieldset>
<input value={value} onChange={this.handleChange} /> **(3)**
</fieldset>
);
}
}
class Calculator extends React.Component {
handleCelsiusChange(value) {
this.setState({scale: 'c', value});
}
render() {
return (
<div>
<TemperatureInput
scale="c"
value={celsius}
onChange={this.handleCelsiusChange} /> **(1)**
</div>
);
}
}
In Calculator, a made up prop called onChange passes a reference to the method handleCelsiusChange to TemperatureInput
this.props.onChange() in TemperatureInput is now a reference to handleCelsiusChange() in Calculator
onChange={this.handleChange} is an event listener, which will fire handleChange() up on the change of the input field.
In conclusion, onChange as a prop is custom, onChange as an event listener is built in. The prop just passes a function reference from an ancestor to the child so you can run it in the child.

Answer 2

I thought props was simply just parameters for components, why can it invoke functions?
You're right, but those parameters can also be callbacks/functions. E.g:
Definition:
class Comp extends Component {
handleChange(e) {
this.props.onChange(e.target.value);
}
render() {
return (<input onChange={this.handleChange.bind(this)) />
}
}
Usage:
<Comp onChange={(a) => console.log(a)} />

Answer 3

Got a clue from SeattleFrey's answer, maybe the author of that code shouldn't name this parameter onchange. It is so confusing for a starter of ReactJs like me.
I name it myChange instead of onChange. It is actually a function passed in as a parameter. And e.target.value is the parameter for that function.Props can contain objects as well as functions, since functions are also objects in Javascript
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.props.myChange(e.target.value);
}
render() {
const value = this.props.value;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input value={value}
onChange={this.handleChange} />
</fieldset>
);
}
}
class Calculator extends React.Component {
handleCelsiusChange(value) {
this.setState({scale: 'c', value});
}
render() {
return (
<div>
<TemperatureInput
scale="c"
value={celsius}
myChange={this.handleCelsiusChange} />
</div>
);
}
}

Answer 4

You just missed this sentence:
If several components need access to the same state, it is a sign that the state should be lifted up to their closest common ancestor instead. In our case, this is the Calculator.
Your quoted code is from component TemperatureInput:
class TemperatureInput extends React.Component {
handleChange(e) {
this.props.onChange(e.target.value);
}
render() {
return (
<fieldset>
<input value={value} onChange={this.handleChange} />
</fieldset>
);
}
}
And TemperatureInput is a child component of Calculator, where TemperatureInput.onChange is assigned to Calculator. handleCelsiusChange
class Calculator extends React.Component {
handleCelsiusChange(value) {
this.setState({scale: 'c', value});
}
render() {
return (
<div>
<TemperatureInput
scale="c"
value={celsius}
onChange={this.handleCelsiusChange} />
</div>
);
}
}