HandleChange in Javascript with React and Semantic Ui

Question

const languageOptions = [
    { key: '0', text: 'English', value: 'english' },
    { key: '1', text: 'Portuguese', value: 'portuguese' },
]

handleChange = field => (e, { value }) => {
    this.setState({[field]:value})
}
      //what is difference between this functions?
handleChange = field => event => {
   this.setState({[field]:event.target.value})
}

<Input onChange={this.handleChange('language')} options={languageOptions} value={this.state.language} />

I do not understand why that second handleChange doesn't work, can anyone explain? I usually use the second way (with the handleChange ('location')), but it does not work ... What does (e, {value}) mean?

MattC · Accepted Answer · 2019-02-28 22:57:51Z

1

handleChange = (e, { value }) can also be written as handleChange = (e, valueObject) where valueObject is {value: 'YOUR_VALUE_HERE'}.

This is called object deconstructing and you can read more about it here.

In order to get your code working the way that you want it to you will have to modify your handleChange function to be the following:

handleChange = field => (event, { value }) => {
   this.setState({[field]: value})
}

edited Feb 28, 2019 at 22:57

answered Feb 28, 2019 at 22:43

MattC

8476 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

maria mariadobairro Over a year ago

handleChange = (e, { value }) don't would be const {value} = e?? I try do this, but doesn't work... handleChange = (e){ const {value} = e console.log(value) //undefined }

MattC Over a year ago

I'm a bit confused as to what you are asking here. Your original question was "What does (e, {value}) mean?". Are you now asking what the Input property types are?

maria mariadobairro Over a year ago

I wan't to know what is (e, {value})... Because it isn't const {value} = e

maria mariadobairro Over a year ago

thanks for your answer, but i do not understand why e was passed and don't was used

maria mariadobairro Over a year ago

I've reformulated the question to make it clearer, I still do not understand the difference between these two functions ... when I use <input onChange = {this.handleChange ('anyValue')} />, using handleChange = field = > event => {} works normally, but with <Input /> (from Semantic Ui), the handleChange does not work

Anand G · Accepted Answer · 2019-02-28 23:01:56Z

1

Really good question! Let me try to explain.

In your first function

handleChange = (e, { value }) => {
    this.setState({same:value})
}

your function is accepting e and {value} as function parameter. however your second function is

concise body syntax, where in the "return" is function body. So every expression after => is a function. This is the typical example of Currying

let me explain it by example

handleChange = field => event => {
   this.setState({[field]:event.target.value})
}

Above function after Babel compilation becomes

const handleChange = function(field) {
  return ( function(event) {
     return 'something'
   })
}

The second approach creates a closure + currying type of function. You can keep adding => and it will keep returning function. If you try to check the compiled code you could see something similar as above.

Hence In the first function

handleChange = (e, { value })

setState works fine because the e and {value} are the function parameters and has no closure, however in second

handleChange = field => event =>

event is the parameter of inner function in a closure. To read more about it you can go here Currying in JavaScript ES6

Hope this helps!

answered Feb 28, 2019 at 23:01

Anand G

3,2102 gold badges24 silver badges30 bronze badges

3 Comments

maria mariadobairro Over a year ago

why i pass e in parameter and i don't use it? (e//?, { value })

Anand G Over a year ago

e represent event object returned by the DOM. if you don't need that one you should not use.

maria mariadobairro Over a year ago

if i don't pass e in parameter, value will be undefined... if i pass just e, and in function i do const {value} = e, value will be undefined too

Collectives™ on Stack Overflow

HandleChange in Javascript with React and Semantic Ui

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related