Destructuring simple nested Object with ES6/React

Question

I am having this object

const launch = {
    "flight_number": 102,
    "mission_name": "GPS SV05",
    "mission_id": []
    "rocket": {
        "rocket_id": "falcon9",
        "rocket_name": "Falcon 9",
        },
    "details": null,
    "upcoming": true,
    "static_fire_date_utc": null,
    "static_fire_date_unix": null,
    "timeline": null,
    "crew": null
}

How can I get the rocket_name from this obj? I tried destructuring as such

const {rocket: {rocket_name}} = launch

and then tried to get

{rocket_name}

in my JSX, but it returned TypeError: launch.rocket is undefined

const launch = {
  "flight_number": 102,
  "mission_name": "GPS SV05",
  "mission_id": []
  "rocket": {
    "rocket_id": "falcon9",
    "rocket_name": "Falcon 9",
  },
  "details": null,
  "upcoming": true,
  "static_fire_date_utc": null,
  "static_fire_date_unix": null,
  "timeline": null,
  "crew": null
}

const {
  rocket: {
    rocket_name
  }
} = launch

I tried many different ways to destructure it, even by doing launch.rocket.rocket_name

and react still returns the same error.

Answer 1

Sounds like you have a scenario where one or more of your records don't have a rocket property set. You can mitigate this by supplying a default value e.g.

const {rocket: {rocket_name} = {}} = launch