Dynamically set values to variables in React/React Native .map function - reactjs

Question

I want to dynamically set the value to variables in .map function but it appears to syntax errors. Please help me out.
I used to use {} to wrap the JavaScript code in html but this time it didn't work as expected.
Additionally I also wondering that is it possible to access variables stored in the local state object within .map function.
import React from 'react';
import { View, Text } from 'react-native';
import { Icon, Avatar } from 'react-native-elements';
class SearchListItem extends React.Component {
render() {
const { id, title, shortDescription, time, locationDescription, peopleGroup } = this.props.item;
const indexX = -28;
const indexZ = 1.1;
return (
<View style={styles.containerStyle}>
<View style={{ flexDirection: 'row' }}>
<View style={{ width: '90%' }}>
<Text style={styles.title}>{title}</Text>
</View>
<View style={{ width: '10%' }}>
<Icon
name='star-outline'
type='material-community'
color='#666666' />
</View>
</View>
<View>
<Text style={{ marginTop: 5, color: '#666666' }}>{shortDescription}</Text>
<Text style={{ marginTop: 5 }}>{time}</Text>
<Text style={{ marginTop: 5 }}>{locationDescription}</Text>
</View>
<View style={{ flexDirection: 'row', marginTop: 20 }}>
{const i = 0}
peopleGroup.map((people) => (
<Avatar
width={30}
position='absolute'
containerStyle={{ transform: [{translate: [-28 + (28 * i), 0, 20]}] }}
small
rounded
source={{uri: "http://www.5seestar.com/jiaoxuewen/images/1701/dengchao.jpg"}}
activeOpacity={0.7}
/> ));
</View>
</View>
);
}
};
const styles = {
containerStyle: {
padding: 30,
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'center',
marginTop: 5
},
title: {
fontWeight: 'bold',
fontSize: 18
}
};
export default SearchListItem;

Answer 1

All you want to do is to use the index of the mapped value, so you can use this i guess :
<View style={{ flexDirection: 'row', marginTop: 20 }}>
{
peopleGroup.map((people,i) => (
<Avatar
width={30}
position='absolute'
containerStyle={{ transform: [{translate: [-28 + (28 * i), 0, 20]}] }}
small
rounded
source={{uri:"http://www.5seestar.com/jiaoxuewen/images/1701/dengchao.jpg"}}
activeOpacity={0.7}
/>
));
}
</View>