score:3

Accepted answer
const updateBubble = ({y, vy, ...props}) => ({y: y + vy, vy: vy + 0.1, ...props})

this.setState(state => ({bubbles: state.bubbles.map(updateBubble)}))

score:0

import React from 'react'
import Box from './box'

export default class Boxes extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            started:[false,false,false,false] /*these flags will be changed on your "onClick" event*/
        } 
    }
    render() {
        const {started} = this.state
        return(
            <div>
              {started[0] && <Box />}
              {started[1] && <Box />}
              {started[2] && <Box />}
              {started[3] && <Box />}
            </div>
        )
    }
}

score:2

this.state = {bubbles: history}

this.setState({ bubbles: this.state.bubbles.map(x => { 

    // Option 1 - more verbose
    let newBubble = x; // or even let newBubble = {...x}
    newBubble.vy = x.vy + 1;

    // Option 2 - directly update x
    x.vy = x.vy + 1

    // Then
    return x;
})})

Related Query

More Query from same tag