CODEWITHSUNDEEP
javascriptecmascript-6
Leff
Leff

Reputation: 1320

Destructuring object as parameter in ES6

I am following a tutorial on react, and I am sorry for this newbie question but I am wondering why do we need to deconstruct parameters in this line, when we fetch data from an api:

.then( ({results: items}) => this.setState({items}))

componentWillMount(){
    fetch( 'https://swapi.co/api/people/?format=json' )
      .then( response => response.json() )
      .then( ({results: items}) => this.setState({items}))
}

What I am wondering is, why can't we just pass the result of response.json() as a normal parameter like this:

.then( (items) => this.setState({items}))

Upvotes: 0

Views: 934

Answers (4)

SrThompson
SrThompson

Reputation: 5748

Let's go step by step

fetch( 'https://swapi.co/api/people/?format=json' )
      .then( response => response.json() )
      .then( ({results: items}) => this.setState({items}))

fetch returns a Promise that resolves into a Response object. response.json() returns a Promise that resolves into a JSON of the response body. Every time that you return a Promise on a then() it's passed down the chain, so you get it as an input on the next then. Finally, the JSON object that the response body contains it's probably of the form { results, ...}. on the last fetch, the destructuring takes that JSON, extracts whatever the results key has inside and renames it to items, so you can reference it inside the callback as a variable called items.

Without destructuring, that last then would need to have this shape:

.then(responseBodyAsJSON => this.setState({items: responseBodyAsJSON.results }))

Upvotes: 0

Julio Ojeda
Julio Ojeda

Reputation: 817

It's simple if you take a look of the response you will se that has an structure like the following.

{
 count: 0,
 results: ...
 ...
}

As you can see it's an object that one of its properties is called results. In this particular case it seems you don't care about the other information you only want to grab the results which is an array. If you were to just pass the return value from the callback without Destructuring you will set your state to a whole new object.

Upvotes: 0

Jonas Wilms
Jonas Wilms

Reputation: 138267

You dont need to destruct:

.then( res => this.setState({items: res.result }))

or:

.then( response => response.json().result )
.then( items => this.setState({items}));

Upvotes: 1

dlopez
dlopez

Reputation: 995

I don't know the data structure of the reponse of that API, but assuming that that code is working, you "need" to destructure because the data object you're receving it's something like { results: items, .... }, but you don't want to do anything with the rest of the object.

Obviously, you don't need to do it like that in a strict way. You can do something like this result => this.setState({ items: result.items }), but I think that you can agree with me that is a bit less compact.

In the end is a question of preferences, but I personally prefer how the code looks with the destructuring.

Upvotes: 1

Related Questions