ERROR Warning: Each child in a list should have a unique "key" prop

Question

Why is it showing me this error?

I have an app created with npx react-native init myProyect created in my React Native studios.

I'm testing the way to add the styles with 'styled-components / native'.

I want to show different companies, with their name, address, icon of the type of company that it is, image of the company and rating stars.

I have added an svg image for the stars. For the company image, for testing purposes, I have added it by URL, but I want to add the image from the assets folder, and I don't know how to do it.

Until now you could see the company image, the stars and the CLOSE image, which is also svg and I bring it from a file. When I have tried to add the icon to show the category of the company it is, the icon is not displayed, and despite running the App, the console shows me the following error:

LOG Running "searchYourBusiness" with {"rootTag": 121}
 ERROR Warning: Each child in a list should have a unique "key" prop.

Check the render method of `StoreInfo`. See https://reactjs.org/link/warning-keys for more information.
SvgXml @ http: //10.0.2.2: 8081 / index.bundle? Platform = android & dev = true & minify = false & app = com.searchYourBusiness & modulesOnly = false & runModule = true: 140774: 31
    in StoreInfo (at StorePantalla.js: 31)
    in RCTView (at View.js: 32)
    in View
    in StyledNativeComponent (created by Styled (View))
    in Styled (View) (at StorePantalla.js: 30)
    in RCTView (at View.js: 32)
    in View (at SafeAreaView.js: 41)
    in SafeAreaView
    in StyledNativeComponent (created by Styled (Component))
    in Styled (Component) (at StorePantalla.js: 23)
    in StoreDisplay (at App.js: 35)
    in ThemeProvider (at App.js: 34)
    in App (at renderApplication.js: 48)
    in RCTView (at View.js: 32)
    in View (at AppContainer.js: 106)
    in RCTView (at View.js: 32)
    in View (at AppContainer.js: 133)
    in AppContainer (at renderApplication.js: 41)
    in searchYourBusiness (RootComponent) (at renderApplication.js: 57)

I have looked for solution in other similar answers on this site, but I have not managed to solve:

Warning: Each child in a list should have a unique "key" prop

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`

React Warning: Each child in a list should have a unique "key" prop. in render() function

How to fix Warning: Each child in a list should have a unique "key" prop

Not what else to do to correct the error and display the icon.

How can I show the icon and eliminate the error?

What should I do to show an icon and an image from my assets folder according to my structured code?

I show the files involved in this

file App.js

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
import { ThemeProvider } from 'styled-components/native'

import { theme } from './src/theme'

import StorePantalla from './src/features/stores/pantallaStore/StorePantalla'


export default function App() {

  return (
    <ThemeProvider theme={theme}>
      <StorePantalla />
    </ThemeProvider>
  )
  }

const styles = StyleSheet.create({
})

File StoreInfo.js

import React from 'react'
import { View, Text, StyleSheet, Image } from 'react-native'
import { Card } from 'react-native-paper'
import styled from 'styled-components/native'
import { SvgXml } from 'react-native-svg'
import star from '../../../../assets/star'
import closed from '../../../../assets/closed'

const StoreCard = styled(Card)`
  background-color: ${(props) => props.theme.colors.bg.secondary}`

const StoreCardCover = styled(Card.Cover)`
  padding: ${(props) => props.theme.space[4]}
  background-color: ${(props) => props.theme.colors.bg.primary}
  `

const Title = styled.Text`
  font-family: ${(props) => props.theme.fonts.heading}
  padding-left: ${(props) => props.theme.space[3]}
  padding-bottom: ${(props) => props.theme.space[1]}
  fontSize: ${(props) => props.theme.sizes[2]}
  color: ${(props) => props.theme.colors.text.primary}
`

const Address = styled(Text)`
  font-family: ${(props) => props.theme.fonts.body}
  padding-left: ${(props) => props.theme.space[3]}
  padding-bottom: ${(props) => props.theme.space[4]}
`

const Info = styled(View)`
  padding: ${(props) => props.theme.space[2]}
`

const Rating = styled(View)`
  flex-direction: row;
  padding-left: ${(props) => props.theme.space[2]}
  padding-bottom: ${(props) => props.theme.space[2]}
`

const Section = styled(View)`
  flex-direction: row;
  align-items: center;
`
const SectionEnd = styled(View)`
  flex: 1;
  flex-direction: row;
  justify-content: flex-end;
`
const Icon = styled(Image)`
  width= 35px;
  height= 35px;
  margin-left: ${(props) => props.theme.space[3]}
`

export const StoreInfo = ({ store = {} }) => {
  const {
    name = "Online Company",
    //image= require('../../../../assets/logos.jpg'),
    //photos = ["https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1125/posts/30546/preview_image/RN.jpg"],

    icon = "https://img.icons8.com/material-two-tone/384/000000/espresso-cup--v2.png",
    photos = ["https://cdn.pixabay.com/photo/2015/09/09/19/56/office-932926_1280.jpg"],
    address = "Charcos Enbarrados, 6 Ninguna Parte 04593",
    rating = 4,
    isClosed = true,
  } = store

  const ratingArray = Array.from(new Array(Math.floor(rating)))

  return (
    <StoreCard
      elevation={5}
    >
      <StoreCardCover
        key={name}
        resizeMethod='scale'
        source={{ uri: photos[0] }}
      />
      <Info>
        <Title> {name} </Title>
        <Section>
          <Rating
           style={styles.rating}
          >
            {ratingArray.map(() => (
              <SvgXml xml={star} width={30} height={30} />
            ))}
          </Rating>
          <SectionEnd>
            {isClosed && <SvgXml xml={closed} width={40} height={40} />}
            <Icon
              source={{ uri: icon }} />
          </SectionEnd>
        </Section>
        <Address> {address} </Address>
      </Info>
    </StoreCard>
  )
}

 const styles = StyleSheet.create({
  rating: {
    paddingLeft: 20
  }
})  

File StorePantalla.js

import React from 'react'
import { View, SafeAreaView } from 'react-native'
import { Searchbar } from 'react-native-paper'
import { StoreInfo } from '../componentStore/StoreInfo'
import styled  from 'styled-components/native'

const SafeArea = styled(SafeAreaView)`
  flex:1;
`
const BarSearch = styled(View)`
  padding: ${(props) => props.theme.space[3]}
`
const StoreList = styled(View)`
    flex: 1;
    background-color: #00BCD4;
    padding: 1${(props) => props.theme.space[2]}
`


export default function StorePantalla() {

  return (
    <SafeArea>
      <BarSearch>
        <Searchbar
          placeholder="Search"

        />
      </BarSearch>
      <StoreList>
        <StoreInfo/>
      </StoreList>
    </SafeArea>
  )
}

Answer 1

The issue is here:

{ratingArray.map(() => (
          <SvgXml xml={star} width={30} height={30} />
        ))}

you have to add a key property, something like:

{ratingArray.map((_, i) => (
          <SvgXml key={i} xml={star} width={30} height={30} />
        ))}

For more info look at the docs: https://reactjs.org/docs/lists-and-keys.html#basic-list-component