How to pass (and use) multidimensional array as prop in React?

Question

I want to send a set of data to a React component as a prop. I've been able to do this as an array as such:

const priceTableRow = {
  term: '12 Months',
  nonRecurringCost: 820.0,
  monthlyRecurringCost: 1160.0,
  totalContractCost: 14740.0,
};

export const priceInfoTableExample = () => {
  return <priceInfoTable priceInfo={priceTableRow} />;
};

But how can I send a multidimensional array? Eg:

const priceTableRow = {[
  [
    term: '12 Months',
    nonRecurringCost: 820.0,
    monthlyRecurringCost: 1160.0,
    totalContractCost: 14740.0,
  ],
  [
    term: '24 Months',
    nonRecurringCost: 430.0,
    monthlyRecurringCost: 980.0,
    totalContractCost: 23950.0,
  ],
  [
    term: '36 Months',
    nonRecurringCost: 0,
    monthlyRecurringCost: 870.0,
    totalContractCost: 31320.0,
  ]
]};

I can't find any useful information on Google or SO. Can anyone point me in the right direction?

Answer 1

First time you are sending just an object. You can do the same in the second example - you just need to make priceTableRow array of objects:

const priceTableRow = [
  {
    term: '12 Months',
    nonRecurringCost: 820.0,
    monthlyRecurringCost: 1160.0,
    totalContractCost: 14740.0,
  },
  {
    term: '24 Months',
    nonRecurringCost: 430.0,
    monthlyRecurringCost: 980.0,
    totalContractCost: 23950.0,
  },
  {
    term: '36 Months',
    nonRecurringCost: 0,
    monthlyRecurringCost: 870.0,
    totalContractCost: 31320.0,
  }
];

export const priceInfoTableExample = () => {
  return <priceInfoTable priceInfo={priceTableRow} />;
};

So in your priceInfoTable you can loop over array elements with:

   props.priceTableRow.map((el)=>{ 
//do whatever needs to
})