(React) How to destructure array of objects with nested array of objects

Question

I had a tech test recently, and the test was to fetch a list of instructions from an api, store them in redux and render them out. Basically is was documentation for a service.

The api returned a huge array of objects, with nested arrays of objects etc. I soon struggled trying to destructure it all.

I didnt get the job, but would like to learn from this and take it as a learning experience, any help would be appreciated!

I've condensed it down to this:

[
  {
    title: "Some Title",
    copy: "Some copy",
  },
  {
    title: "Some other Title",
    curl: "some instruction",
    dotNet: "some instruction",
    javascript: "some instruction",
  },
  {
    title: "Another Title",
  },
  {
    title: "Yet Another Title",
    image: {
      fields: {
        title: "Image Title",
        file: {
          url: "//imgurl",
          details: {
            image: {
              width: 100,
              height: 200,
            },
          },
        },
      },
    },
    caption: "some caption",
  },
  {
    title: "This is the title",
    curl: "some instruction",
    dotNet: "some instruction",
    javascript: "some instruction",
  },
  {
    title: "Another title",
    modules: [
      {
        fields: {
          title: "Title again",
          copy: "Copy again",
        },
      },
      {
        fields: {
          title: "Im another title",
          curl: "some instruction",
          dotNet: "some instruction",
          javascript: "some instruction",
        },
      },
    ],
  },
];