Is there any alternate for the use of 'e' in handleChange(e) function in react component for accessing textbox value?

Question

Here is the code snippet for React component:

  handleChange(e) {
    this.setState({ value: e.target.value });
  }


  render() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <label htmlFor="markdown-content">
          Enter some markdown
        </label>
        <textarea
          id="markdown-content"
          onChange={this.handleChange}
          defaultValue={this.state.value}
        />
      </div>
    );
  }
}

Here in handleChange(e) function what is the use of e and how does it get derived?

It's the event, it's passed in by React when the callback is invoked (with the wrong *this*, as you'll find out). Read the docs: https://reactjs.org/docs/handling-events.html — jonrsharpe, Dec 24 '20 at 16:00

score 4 · Answer 1 · answered Dec 24 '20 at 16:00

4

"e" is a synthetic event parameter passed by React to your handle change function. Read more here on this: React Events

Cannot explain the full concept here, so you'll have to understand more of DOM and React, start here with events first.

answered Dec 24 '20 at 16:00

Sudhanshu Kumar

1,926
1
9
21

score 3 · Accepted Answer · answered Dec 24 '20 at 16:00

e is the event created by the textarea HTML element when its onChange is triggered, in other words when changes are made to the textarea value. It contains information about which element got its valued changed (e.target) and to which value it was set (e.target.value), among other data. You can try logging it by using console.log(e) inside handleChange to see all the data it contains. (e often also contains method for manipulating how it behaves, such as e.preventDefault(), but is usually not useful in the case of events generated by textarea onChange.)

The name e is arbitrary and can be set to anything you want. The properties target and value are not.

Also note that there are many several similar event that can be created depending on the source of the event dispatch. An example would be clicking with your mouse somewhere, which gives you access to other data - such as the X and Y coordinates of the click - than the one dispatched when textarea onChange is triggered. Both are commonly referred to as e or element.

Is there any alternate for the use of 'e' in handleChange(e) function in react component for accessing textbox value?

2 Answers2