Here is my code
return (
<ScrollView>
<View style={{ padding: 10, flex: 1 }}>
{listing.map((listing) => (
<>
<View style={styles.containerOne} key={listing.snome_id}>
<View
id="listing"
style={styles.containerTwo}
>
<Text style={{ margin: 15, marginTop: 20 }}>
{listing.header}
</Text>
{listing.url.map((url) => (
<Image style={styles.pic} source={{ uri: url }} />
))}
<Text style={{ margin: 15, marginTop: 20 }}>
{' '}
{listing.description}
</Text>
</View>
</View>
</>
))}
</View>
</ScrollView>
);
I am trying to view multiple listings and the corresponding image and some text. It seems even though I am using a key prop in the view component it is still throwing error to me and I am not sure about the reason behind that.
I hope that somebody can help me to resolve this issue.
The key always needs to be given to the top-level component created by the map function. In your code, that's the Fragment. You'll need to replace this:
<>
<View style={styles.containerOne} key={listing.snome_id}>
...
</>
With this:
<React.Fragment key={listing.snome_id}>
<View style={styles.containerOne}>
...
</React.Fragment>