4
handleChange(event) {
    const {name, value} = event.target
    this.setState({
        [name]: value
    })
}

this is a method that notes for change in state of a react component. takes event as parameter and does something and changes state.

Emile Bergeron
  • 14,368
  • 4
  • 66
  • 111
Navish
  • 81
  • 2
  • 11
  • 4
    Search for ["ES6 destructuring assignment"](https://www.google.com/search?q=es6+destructuring+assignment) and here (on SO) [\[javascript\] destructuring](https://stackoverflow.com/search?q=%5Bjavascript%5D+destructuring). – user2864740 Mar 15 '19 at 17:53
  • 1
    You should probably learn about all the new JavaScript syntaxes or you'll find yourself asking a lot of these questions https://webapplog.com/es6/ – azium Mar 15 '19 at 17:57
  • Possible duplicate of [Syntax: const {} = variableName, can anyone explain or point me into the right direction](https://stackoverflow.com/questions/35415978/syntax-const-variablename-can-anyone-explain-or-point-me-into-the-right-d) and [What is destructuring assignment and its uses?](https://stackoverflow.com/questions/54605286) – adiga Mar 15 '19 at 18:04

2 Answers2

7

This method is called destructuring, which is used to save some few lines.
The following example will show you the usage of destructuring.

let person = {
  name: 'David',
  age: 15,
  job: 'Programmer'
}

const { name, age } = person; // Takes the property/method from the object

console.log(name); // Prints 'David'
console.log(age); // Prints '15'

Without using destructuring, I would have done this:

const name = person.name;
const age = person.age;

Which needed more lines.

You can read more about destructuring here.

GamesProSeif
  • 175
  • 1
  • 1
  • 9
1

event.target means element where you pass the function, and { name } this technique is called destructing it is same as const name = event.target.name

for example if you pass handleChange to some input event.target is input where you passed handleChange function

ilia
  • 250
  • 3
  • 19