Why const names need to be wrapped in curly brackets in ReactJS

Question

render () {
  const { params } = this.props.params
  return (
   <div>{ params.article }</div>
  )
}

Why does params need to be wrapped in curly brackets could it be just 'const params = this.props.params'

Answer 1

This is called destructuring.

Instead of doing

const params = this.props.params.params

you can use the short hand

const { params } = this.props.params.

See the examples

const a = {
  key: 'value',
  key2: 'value2',
}

const {key} = a //getting a.key from a and assigning it to key

console.log(key)

const { key2: newVar } = a //getting a.key2 from a and assigning it to newVar

console.log(newVar)

Hope this helps!

Answer 2

const { foo } = bar.baz

is the same as

const foo = bar.baz.foo

so what you're really doing there is setting params equal to this.props.params.params.

Also, this is not a feature of React. Rather, it's a feature of ES6 Javascript.

Answer 3

It is know as deconstructing assignment. You can extract the data or elements from objects or Arrays.

const { params } = this.props 
is same as
const params = this.props.params;

You can also pull the elements from the array

const x = [1, 2, 3, 4, 5];
const [a, b] = x // [1, 2];

At the end, it's your choice to use it or not.