What does this render method do: const {images, selectedImage} = this.state;?

Question

I'm doing a simple tutorial on react/ redux and I do not understand why we have to, in the render() method, do

const {images, selectedImage} = this.state;

I understand that we need to assign the previously defined variables to the constructor, so it becomes part of our component state and is not just a variable floating around in our component only, but I do no get why we cannot just access them directly in the render method later? I also do not understand why they are defined as constants? I also don't get why they are assigned to state and why they have parentheses aroudn them? Thanks a lot for your help

import React, {Component} from 'react'

const flickrImages = [
  "https://farm2.staticflickr.com/1553/25266806624_fdd55cecbc.jpg",
  "https://farm2.staticflickr.com/1581/25283151224_50f8da511e.jpg",
  "https://farm2.staticflickr.com/1653/25265109363_f204ea7b54.jpg",
  "https://farm2.staticflickr.com/1571/25911417225_a74c8041b0.jpg",
  "https://farm2.staticflickr.com/1450/25888412766_44745cbca3.jpg"
];

export default class Gallery extends Component {
  constructor(props) {
    super(props);
    this.state = {
      images: flickrImages,
      selectedImage: flickrImages[0]
    }
  }

  handleThumbClick(selectedImage) {
    this.setState({
      selectedImage
    })
  }

  render() {
    const {images, selectedImage} = this.state; // why do we have to do this? And why does this need to be a constant?
    return (
      <div className="image-gallery">
        <div className="gallery-image">
          <div>
            <img src={selectedImage} />
          </div>
        </div>
        <div className="image-scroller">
          {images.map((image, index) => (
            <div key={index} onClick={this.handleThumbClick.bind(this,image)}>
              <img src={image}/>
            </div>
          ))}
        </div>
      </div>
    )
  }
}

PS: if you can suggest a better title for this question please let me know, i was not sure what to call it, and I'm sure there's a better name the sort of thing that's being done here

Possible duplicate of [One-liner to take some properties from object in ES 6](http://stackoverflow.com/questions/25553910/one-liner-to-take-some-properties-from-object-in-es-6) — Whymarrh, Nov 01 '16 at 10:07

score 18 · Accepted Answer · answered Nov 01 '16 at 10:29

18

It's called object destructuring.

It assigns this.state.images to the local constant images and this.state.selectedImage to the local constant selectedImage.

answered Nov 01 '16 at 10:29

zwippie

13,369
3
34
53

thanks. why do they have to be constants though? and why is this good? – Peter Zacharias Nov 01 '16 at 10:48
3

The use case of a constant is that you cannot change it's value. This prevents you from accidentally changing the value and then wondering why your rendered data is out-of-sync with the current state. – zwippie Nov 01 '16 at 11:04
3

I personally think that doing object destructuring can significantly reduce the amount of code you need to write. For instance, you have form with a lot of inputs, for every input you just need to write {data.something} instead of {this.state.data.something}. – MING WU Nov 28 '18 at 03:29

What does this render method do: const {images, selectedImage} = this.state;?

1 Answers1