ES6 destructuring to get the nth item from inner array

Question

I have an array in my state in my React project. something like :

state = {
   cats : [
      {cid : 1 , value : 1}
      {cid : 2 , value : 3}
      {cid : 3 , value : 4}
   ],
   curpage : 3
}

now all I want is to get nth item of the array cats with destructring. I tried

const { cat : {cats[id]} } = this.state;

or

 const { cats[id] } = this.state;

Answer 1

You can use the computed object property with destructuring to get the nth array item and assign it to a variable:

const state = {
   cats : [
      {cid : 1 , value : 1},
      {cid : 2 , value : 3},
      {cid : 3 , value : 4}
   ],
   curpage : 3
}

const n = 2;

const { cats: { [n]: nthCat} } = state;

console.log(nthCat)

Or, if n is small and you know it beforehand, you could ignore the values you don't need:

const state = {
   cats : [
      {cid : 1 , value : 1},
      {cid : 2 , value : 3},
      {cid : 3 , value : 4}
   ],
   curpage : 3
}

const { cats: [,,thirdCat] } = state;

console.log(thirdCat)

Answer 2

You could destructure to the index and take a renamed value.

var state = { cats: [{ cid: 1, value: 1 }, { cid: 2, value: 3 }, { cid: 3, value: 4 }], curpage: 3 },
    index = 2,
    { cats: { [index]: item } } = state;

console.log(item);