How to refer to a nested array element in Reactjs?

I have a config file which i am refering to in my app.js. I need to use key from a nested element from the array. Here is the array struct. I need to refer to label under contact element.

export const detailConfig = [
  {
    name: "Pr1",
    shortDescription: "Pr1 is a health related product",
    longDescription: "Pr1 is a health related product",
    contacts: [
      { label : "a", link :"1" },
      { label : "b", link: "1" }
    ]
  },

  {
    name: "pr2",
    shortDescription: "Pr2 is a mobile related product",
    longDescription: "Pr2 is a mobile related product",
    contacts: [
      { label : "c", type :"1" },
      { label : "d", type: "1" }
    ]
  }
];

React code:

import "./styles.css";

import {detailConfig} from "./config"

export default function App() {
  return (
    <div className="App">
      {detailConfig.map(detailConfig=>
        <div>
      <h1>{detailConfig.name}</h1>
      <p>{detailConfig.contacts.label}</p>
      </div>

      )}
    </div>
  );
}

code and demo:
https://codesandbox.io/s/objective-wright-ekktrg?file=/src/App.js

Your contacts property is an array itself. So, you either need to:

1. Loop/map over it and render its items however you'd like to (https://codesandbox.io/s/peaceful-frost-mnv2fw)
2. Choose the one item that you want from it (e.g. the first contact only - contacts[0]) and use it instead.

Your contacts property is just an array. To access a value of a nested array, you could generally do

// access the first products first contact label
const someLabel = detailsConfig[0].contacts[0].label;

However you are already mapping the initial array, which loops over every single entry, so you do not need to specify which element you are referring since it is handled by the .map(...)

// returns the label of the first contact for each product if a contact exists
const labels = detailsConfig.map(product => {
  // no need to specify what exactly product is
  return product.contacts[0].label;
});

This would logically be equal to

const labels = [];
for(let i = 0; i < detailsConfig.length; i++) {
  // the first line is handled in the `.map(...)` function
  const product = detailsConfig[i];
  labels[i] = product.contacts[0].length;
}

In your use case, there are many things which could make sense

// list each individual contact in its seperate <p></p>
// this would make most sense to me since it gives you the power to easily
// adapt the view in case more information would be needed
detailConfig.map(detailConfig=> (
  <div>
    <h1>{detailConfig.name}</h1>
    <p>
      {
        detailConfig.contacts.map(contact => (
          <p>{contact.label}</p>
        ))
      }
    </p>
  </div>
))

// show label of first contact if available
detailConfig.map(detailConfig=> (
  <div>
    <h1>{detailConfig.name}</h1>
    {/* added null check in case no contact was found */}
    <p>{detailConfig.contacts[0]?.label ?? 'No Contact found'}</p>
  </div>
))

// join the label of all contacts together, seperated by `/`
detailConfig.map(detailConfig=> (
  <div>
    <h1>{detailConfig.name}</h1>
    <p>{detailConfig.contacts.map(contact => contact.label).join(' / ')}</p>
  </div>
))