React Native Array of absolution position views - react-native

Question

I wanna render array of "Star" to the view with absolute position. When I add them 1 by 1. It works fine, but when I add them as array, it only shown the last View in the array
render(){
const pointSize = 30
let pointViews = []
let baseStyle = {position:'absolute',width:pointSize,height:pointSize,backgroundColor:'yellow',borderRadius:pointSize/2}
console.log("render ");
let points = this.state.data
this.state.data.forEach(function(point){
console.log("for: "+JSON.stringify(point));
let finalStyle = baseStyle
finalStyle.left = point.x
finalStyle.top = point.y
let key = point.x+"_"+point.y
let pointView = <View style={finalStyle} key={key}><Text>{key}</Text></View>
pointViews.push(pointView)
})
console.log("pointViewss: "+pointViews)
return(
<Container style={{position:'absolute'}}>
{points.map((point,key) => {
let finalStyle = baseStyle
finalStyle.left = point.x
finalStyle.top = point.y
return(
<View style={finalStyle} key={key}><Text>{key}</Text></View>
)
})}
{/*<View style={[baseStyle,{left:10,top:10}]}></View>*/}
{/*<View style={[baseStyle,{left:50,top:50}]}></View>*/}
{/*<View style={[baseStyle,{left:100,top:100}]}></View>*/}
</Container>
)
}
What it shown
What I want

Answer 1

Here you go
constructor(props){
super(props)
this.state= {
data: [
{x: 10, y:10},
{ x: 50, y: 50 },
{ x: 100, y: 100 }
]
}
}
render() {
const pointSize = 30
let pointViews = []
let baseStyle = { position: 'absolute', width: pointSize, height: pointSize, backgroundColor: 'yellow', borderRadius: pointSize / 2 }
return (
<View style={{position: 'absolute'}}>
{
this.state.data.map((point, key) => {
return (
<View style={{ ...baseStyle, left: point.x, top: point.y }} key={key}><Text>{key}</Text></View>
)
})
}
</View>
)
}
I hope its clear enough :)