How to refer to a nested array element in Reactjs?

Question

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

What exactly are you trying to do? Do you want to list all available contacts of a product, or just want to list any contact if available? — sschwei1
– sschwei1, Commented Feb 10, 2023 at 8:04

Kavian Rabbani · Accepted Answer · 2023-02-10 08:05:50Z

2

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

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

answered Feb 10, 2023 at 8:05

Kavian Rabbani

9845 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sschwei1 · Accepted Answer · 2023-02-10 08:33:46Z

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>
))

Collectives™ on Stack Overflow

How to refer to a nested array element in Reactjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related