0

I am using bootstrap in one of our projects and there's this page where in I need to map over an array which will render a list of <InnerComponent /> in a grid of 3 columns. However, I needed to include the bootstrap column for each array child that the map function returns. And since <div> is the direct child, then I have to put they 'key' property into it like so:

somearray.map((item, index) => {
    return (
        <div
            className="col-lg-4 col-md-6 col-sm-12"
            key={item.id}
        >
            <InnerComponent />
        </div>
    );
})

Is this valid? Or should the key be always added as a component prop?

catandmouse
  • 11,309
  • 23
  • 92
  • 150
  • 1
    sounds like you don't really know what key is for. read this page from the official docs https://reactjs.org/docs/lists-and-keys.html – azium Sep 06 '18 at 02:59
  • 1
    What you are doing is correct you just make sure key.id is unique otherwise you will get only first element – Hemadri Dasari Sep 06 '18 at 03:21

0 Answers0