Why does it have to be onChange, onClick, value

JavaScript
1 
class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
this.handleChange = this.handleChange.bind(this)
this.submitMessage = this.submitMessage.bind(this)
  }
handleChange(event) {
  this.setState({
    input: event.target.value
  })
}
submitMessage() {
  this.setState({
    messages: [...this.state.messages,this.state.input],
    input:''
  })
}

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
<input onChange = {this.handleChange} value = {this.state.input}/>
<button onClick={this.submitMessage}>Submit</button>
<ul>
{this.state.messages.map(key => {
  return <li key={key}>{key}</li>
})}
</ul>
        { /* change code above this line */ }
      </div>
    );
  }
}

So for the props you pass to the input, button, why does it have to be called onChange, onClick? Is that mandatory?

2

If you’re asking why it’s onClick instead of a custom name, React defined element property names so it knows when to call the function you are passing to it. If you used anything else, React wouldn’t know when to call your function.

If you’re asking why it’s onClick instead of onclick, React decided to use camelCase to name their properties instead of the default HTML property names, because React is closer to JavaScript than it is to HTML.

1 Like
3

Thank you! Now I know.

1 Like