Adding rendered item position to an array of items?

Question

I'd like to add the positional coordinates of each object as it's rendered so that I can then designate it as a drop zone.

I can get one piece of data into the objLocation, but obviously, it keeps overwriting as each SubComponent is rendered. What is the correct way to built that array of object locations?

const data = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
]


export default class Viewport extends Component {
    this.state = {
      objLocation = [],
    }

    render() {
      return (
        {data.map( d => {
          return(
            <SubComponent onLayout={this.getLayout} id={d.id} />
          )
        })}
      )
    }


    getLayout = (e) => (
      const obj = { 
        width: e.nativeEvent.layout.width,
        height: e.nativeEvent.layout.height,
        x: e.nativeEvent.layout.x,
        y: e.nativeEvent.layout.y,
      }
      this.setState({
        objLocation: obj
      });
    }
}

Answer 1

Found the answer here.

this.setState({ 
  arrayvar: this.state.arrayvar.concat([newelement])
})


ES6 With Spread operator.
this.setState({
  arrayvar: [...this.state.arrayvar, newelement]
})