How to get "key" from accessor?

[KoichaDev]

React is complaining Each child in a list should have a unique "key" prop

Here is my code snippet:

{
....

		Header: 'Product',
		id: 'insurance',
		accessor: (data) => {
			const insuranceObject = data.insurance[0];
			const icon = [];

			if (insuranceObject.paidInsurance) {
				icon.push(<CreditCardIcon />);
			}

			if (insuranceObject.globalInsurance) {
				icon.push(<GlobalGlobeIcon />);
			}

			if (insuranceObject.musicInsurance) {
				icon.push(<MusicIcon />);
			}

			return icon;
		},
	},

What happens is that the column "Product" is displaying 3 different type of SVG icons based on the object that has true or false value

Any idea what I am missing here?

[szamanr]

key is a prop that react uses under the hood to correctly re-render elements in a list when it's modified. just add it as a component prop of each item you push to the array:

icon.push(<CreditCardIcon key="credit-card" />);
icon.push(<GlobalGlobeIcon key="global-globe" />);
icon.push(<MusicIcon key="music" />);

keys should be static and unique.

[KoichaDev]

key is a prop that react uses under the hood to correctly re-render elements in a list when it's modified. just add it as a component prop of each item you push to the array:

icon.push(<CreditCardIcon key="credit-card" />);
icon.push(<GlobalGlobeIcon key="global-globe" />);
icon.push(<MusicIcon key="music" />);

keys should be static and unique.

Fantastic! Thank you!