What is this method carrying out in React.js?

Question

I'm reading through how to create login forms & came across this method:

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

Not too sure what's going on in the setState portion of it. The array brackets are throwing me off for some reason. Can anyone elaborate on what this method is doing?

score 6 · Accepted Answer · answered Jul 27 '18 at 12:55

6

[someExpression] is called a computed property name and is an alternative to writing this:

handleChange(e) {
  const stateUpdate = {};
  stateUpdate[e.target.name] = e.target.value;

  this.setState(stateUpdate);
}

answered Jul 27 '18 at 12:55

Tholle

108,070
19
198
189

1

Thanks a lot for showing me. – sp92 Jul 27 '18 at 14:57
@sp92 You're welcome! – Tholle Jul 27 '18 at 15:47

score 3 · Answer 2 · answered Jul 27 '18 at 12:55

That's new(ish) JavaScript syntax that allows an object literal to compute a property name from an expression. It's effectively the same as:

handleChange(e) {
  var state = {};
  state[e.target.name] = e.target.value;
  this.setState(state);
}

In this case the expression that determines the property name is e.target.name.

score 0 · Answer 3 · answered Jul 27 '18 at 13:02

Assume you have form with inputs named email and password. You have state variables with same name ‘email’ and ‘password’. Now you have this function handleChange attached for onChange event of input.

When it is called for email, it will set state.email to input value similarly for other fields.

This is a new syntax where you can assign objects key in this way.

What is this method carrying out in React.js?

3 Answers3