Need help with onChange event!

JavaScript
1

Tell us what’s happening:
I completed the test, but one thing that confuses me is the onChange event.
As the code below, onChange event work with handleChange function.
So what confuses me here is the event parameter.

  1. Does every function work with onChange event need to have a parameter. If the answer is yes, why?

  2. I replaced the keyword ‘event’ with some other keywords and it still works normally. So is it okay if I use a different word instead of the keyword ‘event’?

Your code so far

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "empty"
    };
    // change code below this line
    this.handleChange = this.handleChange.bind(this);
    // change code above this line
  }
  // change code below this line
  handleChange(event) {
    this.setState({
      input: event.target.value
    })
  }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
      <input type="text" value={this.state.input} onChange={this.handleChange}></input>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};
2
  1. Does every function work with onChange event need to have a parameter. If the answer is yes, why?

No it doesn’t. Your handleChange function needs the event parameter because it’s probably the easiest way to access the source dom element that triggered it. You could just as easily use the ID instead, something along these lines:

handleChange() {
    this.setState({
      input: document.getElementById('myID').value
    })
  }
<input type="text" value={this.state.input} id="myID" onChange={this.handleChange.bind(this)} />

It doesn’t make much sense when the easier way is to use the event target, but if you want to change something else, such another input element, this should work. I’ve not tested it.

  1. I replaced the keyword ‘event’ with some other keywords and it still works normally. So is it okay if I use a different word instead of the keyword ‘event’?

Use anything you want, I use ‘e’.

3

  1. No, but considering you’re using onchange even, you probably wanna take something from said element. Possibly value?
    Example:

  2. <Element onChange={this.someFunction}/>

  3.  someFunction(parameter){

        this.setState({
                         someStateVar: e.target.value,
                         counter: counter+1,
                     });
 }

first getting letter whenever is entered, second thing in setState counts entered letters.But they are primarily used for getting something from that element.