Each child in a list should have a unique "key"

When you are developing apps using Ionic Framework (and probably using React), you may implement

• IonList
• IonItem
• IonGrid
• IonRow
• IonCol
• etc

and when you successfully compiled and displayed on web, you may or may not realize that there is a warning (unless you are using chrome and turn on Developer Tool) like I did. To those who did, you will have similar like I have below:
index.js:1375 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `ThePage`. See https://fb.me/react-warning-keys for more information.
    in ForwardRef(IonItem) (at PublicationPage.tsx:72)
    in PublicationPage (created by Context.Consumer)
    in Route (at App.tsx:63)
    in View (created by StackManager)
    in ViewTransitionManager (created by StackManager)
    in ion-router-outlet (created by IonRouterOutlet)
    in IonRouterOutlet (created by ForwardRef(IonRouterOutlet))
    in ForwardRef(IonRouterOutlet) (created by StackManager)
    in StackManager
    in Unknown (created by ForwardRef(IonRouterOutlet))
    in ForwardRef(IonRouterOutlet) (at App.tsx:52)
    in div (created by IonTabs)
    in div (created by IonTabs)
    in IonTabs (at App.tsx:51)
    in NavManager (created by RouteManager)
    in RouteManager (created by Context.Consumer)
    in RouteManager (created by IonReactRouter)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by IonReactRouter)
    in IonReactRouter (at App.tsx:50)
    in ion-app (created by IonApp)
    in IonApp (created by ForwardRef(IonApp))
    in ForwardRef(IonApp) (at App.tsx:49)
    in App (at src/index.tsx:6)

Searching through the web won't help much. Especially when the warning message is not helping at all.

What you need to do is to ensure for each item you used (list, row, col, grid, etc), you need to assign a key to it. For example, as shown below; whereby for each child within the list, I declared key to it.

certs.Lists.map( ( cert, index ) => {

return (

<IonItem key={1 + '' + index}>

<IonGrid key={1 + '' + index +'0'}>

<IonRow key={1 + '' + index + '' +1}>

<IonCol size="12" style={{backgroundColor:'lightgreen', color:'black'}}><strong>{cert.Certification}</strong></IonCol>

</IonRow>

<IonRow key={1 + '' + index + '' +2}>

<IonCol size="4">Cert. No:</IonCol>

<IonCol size="7">{cert.CertificationNo}</IonCol>

</IonRow>

<IonRow key={1 + '' + index + '' +3}>

<IonCol size="4">Certified By:</IonCol>

<IonCol size="8">{cert.Trainer}</IonCol>

</IonRow>

<IonRow key={1 + '' + index + '' +4}>

<IonCol size="4">Validity:</IonCol>

<IonCol size="8">{cert.Validity} since {cert.Since}</IonCol>

</IonRow>

<IonRow key={1 + '' + index + '' +5}>

<IonCol size="4">Expired:</IonCol>

<IonCol size="8">{cert.Expired}</IonCol>

</IonRow>

</IonGrid>

</IonItem>

);

Once you did that, voila, the warning disappears.

If you don't know where is Developer Tool, it only applies to Chrome Browser as below.
Go to three '.' on the top-right of Chrome, click it. Then go to More Tools and select Developer Tools

Select Developer Tool

The Developer Tools