<div id="root"></div>html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #10375c;
display: flex;
align-items: center;
justify-content: center;
}
@mixin plus-minus {
font-size: 60px;
color: #ffff;
cursor: pointer;
user-select: none;
}
.container {
display: flex;
justify-content: center;
}
.plus {
@include plus-minus;
}
.minus {
@include plus-minus;
}
.num {
margin: 0 50px 0 50px;
color: lighten(red, 20%);
font-size: 60px;
}
.hidden {
visibility: hidden;
}
const { useState } = React;
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div className="container">
<div
className={`plus ${count >= 10 && "hidden"}`}
onClick={() => setCount(count + 1)}
>
+
</div>
<div className="num">{count}</div>
<div
className={`minus ${count < 1 && "hidden"}`}
onClick={() => setCount(count - 1)}
>
-
</div>
</div>
);
};
const counters = Array.from({ length: 6 });
ReactDOM.render(
<div>
{counters.map((item, i) => (
<Counter key={i} />
))}
</div>,
document.querySelector("#root")
);
External CSS
This Pen doesn't use any external CSS resources.