Unique Key for nested objects in react

Question

I have following structure for JSON data structure

[
 [
  { city: x
    patients: x
    id: 1
  },
  { city: y
    patients: y 
    id: 2  
}
],

 [
  { city: x
    patients: x
    id: 1
  },
  { city: y
    patients: y 
    id: 2  
}
 ] 
]

Is this optimal data structure for my data, where each nested sub array represents a day, the nested objects are cities and the id are unique key for each city.

What are you asking exactly? I am not sure I follow. What exactly are you trying to represent here? Is this based on a date, perhaps? — goto
– goto, Commented Apr 21, 2020 at 16:45
Yes each sub array represents a date, and i am trying to give each object within the sub array a unique key as recommended by the react official documentation — Awais Ali
– Awais Ali, Commented Apr 21, 2020 at 16:54

Max · Accepted Answer · 2020-04-21 16:41:04Z

1

The best thing is that each object has a unique id, but if you don't have one, you can use the index of map method:

objects.map((el, idx) => { 
    ....
    // you can use idx as unique index
    ....
})

For nested objects you can compose the idx (for example "idxmain_idxsub")

answered Apr 21, 2020 at 16:41

Max

1,0487 silver badges14 bronze badges

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

1 Comment

Awais Ali Over a year ago

Well i am not giving each object unique id because they are the same cities, but data keeps changing in the sub array as each sub array represents a new day

goto · Accepted Answer · 2020-04-21 17:22:11Z

One way you could go about this is by combining both the index and city for each object and create a unique identifier.

const data = [
 [
   { id: 1, city: "New York", patients: 100 },
   { id: 2, city: "Boston", patients: 50 },
 ],
 [
   { id: 1, city: "New York", patients: 120 },
   { id: 2, city: "Boston", patients: 75 },
 ]
];

function App() {
  return (
    <div>
      {data.map((items, idx) => (
        <ul key={idx}>
          {items.map((item) => (
            <li key={`${idx}-${item.id}`}>
              [{idx}-{item.id}] {item.city}: {item.patients}
            </li>
          ))}
        </ul>
      ))}
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Or, if you want to just flatten your array and have all object within a single array, you could do something similar like I did above:

const data = [
 [
   { id: 1, city: "New York", patients: 100 },
   { id: 2, city: "Boston", patients: 50 },
 ],
 [
   { id: 1, city: "New York", patients: 120 },
   { id: 2, city: "Boston", patients: 75 },
 ]
];
const flattened = data.reduce(
  (accumulator, items, idx) => {
    const cities = items.map((city) => {
      return {
        uniqId: `${idx}-${city.id}`,
        ...city
      };
    })
    return [
      ...accumulator,
      ...cities
    ];
  },
  []
)
console.log(flattened)

Collectives™ on Stack Overflow

Unique Key for nested objects in react

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related