It’s day 3 of #7Day7Websites! This is another fun one (ok, maybe it’s more of an app than a website). It’s bubble wrap. That you can pop. Because that’s fun, right?
When I had this idea, I knew that using React to manage the state of each bubble—popped or unpopped—was the way to go. My Bubble
component only needed this.
state = {
popped: false,
}
And my render function looked like this:
render() {
return(
<div className="bubble"></div>
)
}
}
Ok, so that’s just a div
but with some CSS…
.bubble {
background-color: #5fdde5;
width: 50px;
height: 50px;
border-radius: 25px;
}
That div
now looks like a bubble.

So many bubbles
Now, I need more than a handful of bubbles (things are really stressful now, ok), but repeating <Bubble />
over and over within <App />
was not ideal.
If I create a <BubbleContainer />
component and loop over as many instances of <Bubble />
that I want, I could then render the one <BubbleContainer />
component to <App />
.
The <BubbleContainer />
class component looks like this:
export default class BubbleContainer extends React.Component {
render() {
let rows = [];
for (let i = 0; i < 96; i++) {
rows.push(<Bubble key={i}/>)
}
return (
<div className="container">{rows}</div>
)
}
}
With some styling on the container
class, the app now looks like this:

Click to Pop
Each <Bubble />
has a state of popped
which is false
by default. When clicked, we want to change the value of popped
to true and give a visual indication that the state has changed. And, we only want the state to be changed once, since un-poppping a bubble isn’t a thing.
We’ll update the return
statement to include an onClick
event which fires a handleClick
function:
handleClick = (e) => {
if (this.state.popped == false) {
this.setState({
popped: true,
})
}
}
Since we want a popped bubble to look different from an unpopped bubble, we can use an if
statement to render a <Bubble />
with different classes, that we’ll style with CSS:
render() {
if (this.state.popped === false) {
return (
<div className="bubble unpopped" onClick={(e) => this.handleClick(e)}></div>
)
} else {
return (
<div className="bubble popped" onClick={(e) => this.handleClick(e)}></div>
)
}
}
Our popped
and unpopped
classes changes the background color.
Putting everything together, Bubble Wrap app looks like this after clicking (or tapping) a few bubbles:

Recap
Overall, this was a fun way to test if I remember how local state works in React. And, deploying a React app to Netlify was surprisingly easy with this app, that I feel less intimidated about doing this with my other projects.
From a user perspective, I’d like to have a button or link to get a fresh sheet of bubble wrap (reset the state of all bubbles to popped: false
). Some variances in color would be nice, so would some shading/depth to give a more 3D effect. And, technically bubble wrap has a offset by row as opposed to being perfectly lined up.
Considering I spent about two hours building and deploying this, I’m really happy with how it turned out!
One response to “Bubble Wrap”
[…] Bubble Wrap. Virtual bubble wrap to pop over and over again. […]