Can anyone explain the following code to me? in particular the "this.props[]" and the nested return function

Question

changeHandler = (keyName) => {
return (_evt, updatedValue) => {
____this.propsset${keyName};
____this.computeData();
____};
};

Comments

Note: to format code properly on the Q&A, select your code in the question/answer box, and then click the { } button up on the toolbar, which will then treat that text as code (leaving the proper indentation, etc.), so you don't have to manually use weird tricks like inserting underscores, etc.

Answer 1

Not a master but based on my usage... keyName is the object that is coming in form like textBox text, input filed, ect..The updatedValue would be the value that is being changed. I belive this function could also be rewritten as
changeHandler = (keyName) =>({evt: updatedValue}) => {
this.prop.set${keyName};
this.computeData();
};
The this.props.set is coming in from the outside component that is calling this function.

So you could have

App.js
Keyname function or state in side of app.js.

Calling example.js inside of app.js passing the keyName.
<Example
OnChange=KeyName>

Example.js Is where your code would be
computeData()

changeHandler = (keyName) =>({evt: updatedValue}) => {
this.prop.set${keyName};
this.computeData();
};

Answer 2

It's a little hard to tell what's going on, in part because I think your code didn't translate properly into the Q&A markdown format. You might want to correct that, so that others can provide more accurate help. It might also be helpful to see the context in which the changeHandler is being used, elsewhere in the program.

However... it looks like the overall gist of it is that it looks like changeHandler is a "higher order function" -- i.e. a function that manipulates other functions. In this case, it appears that the changeHandler function is a function that returns another function. So, for example, if you call the changeHandler function with keyName being "moose", then you'll get back another function that does something with props and "moose".

e.g. something like

mooseChangeHandler = changeHandler("moose")
colorChangeHandler = changeHandler("color")

Then, these more specific functions that you've created can (it appears?) be used as some kind of event handlers to handle events, presumably when something changes, and then they will update the appropriate props ("moose" or "color") as well as do some other computations (computeData()).

For a more principles introduction to higher order functions, I recommend reading a proper tutorial or two. Here's a book chapter that looks decent: https://eloquentjavascript.net/05_higher_order.html

(What's more, if you decide to go on to be a professoinal Javascript programmer, i'd recommend reading the whole book: https://eloquentjavascript.net/ !)