0

Could you help me understand why this function below has the event parameter when it is not being used inside the function?

handleBlur = field => event => {
 this.setState({
     touched: { ...this.state.touched, [field]: true }
 })
}

Why this function below not working when I tried?

handleBlur(field) {
    this.setState({
        touched: { ...this.state.touched, [field]: true }
    })
}

This function is being used as per below:

<FormGroup row>
                                <Label htmlFor='firstname' md={2}>First Name</Label>
                                <Col md={10}>
                                    <Input type='text' id='firstname' name='firstname'
                                        placeholder='First Name'
                                        value={this.state.firstname}
                                        valid={errorMessages.firstname === ''}
                                        invalid={errorMessages.firstname !== ''}
                                        onChange={this.handleInputChange}
                                        onBlur={this.handleBlur('firstname')}
                                    />
                                    <FormFeedback>{errorMessages.firstname}</FormFeedback>
                                </Col>
                            </FormGroup>
Autom8
  • 385
  • 2
  • 3
  • 10
  • Did you bind your method your your 'this' context ? – Quentin Grisel May 07 '20 at 20:08
  • 1
    Also, here is a good explanation of the double arrow function https://stackoverflow.com/a/37764035/9868549. To make it short, it's a function taking a parameter that return a function taking the second param. – Quentin Grisel May 07 '20 at 20:14
  • 1
    *" why this function below has the event parameter when it is not being used inside the function?"* I'd guess, because this is more expressive than `handleBlur = field => () => {...}`. Even though it doesn't use the event object, it makes it clear that this function is intended to be used as an event handler – Thomas May 07 '20 at 20:43
  • 1
    Sidenote: going by `onChange={this.handleInputChange}` you could also write `handleBlur = event => this.setState({ touched: { ...this.state.touched, [event.target.name]: true } }); and then just `onBlur={this.handleBlur}` ` – Thomas May 07 '20 at 20:54
  • Thanks a lot for all your explanation, especially for Thomas' side note, it is now very clear to me. – Autom8 May 07 '20 at 21:28
  • Yes it is blinded in the class, thanks. – Autom8 May 07 '20 at 21:47

1 Answers1

1
handleBlur = field => event => {
 this.setState({
     touched: { ...this.state.touched, [field]: true }
 })
}

This is a double arrow function, in this case the function handleBlur passes the value field and returns a function with event as an input, almost like this:

    function handleBlur(field) {
     return function(event) {
        //do something
     }
    }

You can find a very good explanation here, using your own example:

What do multiple arrow functions mean in javascript?

I don't know why that code is not using the event, but it's there.

Antonio MG
  • 20,382
  • 3
  • 43
  • 62
  • Thanks a lot for pointing it out. It is indeed fundamental that I clearly did not understand. Cheers – Autom8 May 07 '20 at 21:49