Question about React handleChange atribute

JavaScript
1

Hi, I’m solving the challenges without problems, but I’m struggling to understand about this handleChange property in the React lessons. Here is an exemple code:

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
       <div>
        { /* change code below this line */ }
        <GetInput input={ this.state.inputValue } handleChange={ this.handleChange } />
        <RenderInput input={ this.state.inputValue } />
        { /* change code above this line */ }
       </div>
    );
  }
};

class GetInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Get Input:</h3>
        <input
          value={this.props.input}
          onChange={this.props.handleChange}/>
      </div>
    );
  }
};

class RenderInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Input Render:</h3>
        <p>{this.props.input}</p>
      </div>
    );
  }
};

The handleChange property is a custom react property? What is this event parameter that I’m not passing but the function is receiving ? Can I just create my own custom properties just like this? Please, explain to me what is happening under the hood!

Thanks for the help and sorry if there are any weird parts in my questions, I’m not very proficient in English.

3

if you look at this line in the render area which creates a input line and then invokes the function this.handleChange whenever someone changes anything in the input area (add/delete). This part is the ‘react’ part. but the actual function being called can be anything (any function name that handles the input).

Correction: see below…

1 Like
4

Ok, thanks and sorry for the inconvenience.

5

Ok, I think I have a better understanding now. I’ll refer to the React reference to see what other properties can be used. Thanks for your answer.

7

hi Randell,

I thought handleChange was equivalent to an event like onClick and therefore is something defined specifically for an input or a button respectively?

9

ah ok, I see. So ‘handleChange’ is a prop then?

11

thanks. Follow up question. Why do they define handleChange function outside of GetInput? Why not just put it inside GetInput since that is the one using it?

13

thanks. Maybe I will develop a ‘taste’ for this when I actually code with it. I’m used to UI handlers being near the UI they handle…

14

We have a handleChange function that receives a object named ‘event’ and then update the main components state to it’s target.value property.

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

Randell, can you please explain how the event object is being passed to the handleChange function? I’m a bit confused since I doesn’t see the function being called nor this parameter passed. Thanks in advance.

16

Yes, this I understood. But what about the ‘event’ parameter in the handleChange function? When is it being passed to it’s function?

handleChange(event)

17

Hi, just wanted to show you how the onChange event triggers the code for handleChange
It is done in the code section above. ‘onChange’ is a synthetic event that React gives us and we tell it what to do by assigning the related handler… (the related handler can be called anything we like but the synthetic event name is fixed)

19

@hbar1st and @camperextraordinaire I think I have a better understading now. Thanks for your help.

1 Like
20

i appreciate the chance to have a discussion and learn.