I want to make components with two buttons aligned vertically in react - reactjs

Question

I want to make a component with increment and decrement functionality. Increment and decrement arrow buttons are aligned vertically and a text on the right side of those buttons which is the counter and a reset button under it.
Here is the component that I want:

Answer 1

i made a simple code that is quite similar to what you want :
Here is the Code i wrote in App.js ( you can move the code later to in independant component ) :
import React from "react";
import "./App.css";
import { useState } from "react";
function App() {
const [counter, setCounter] = useState(0);
return (
<div class="grid-container">
<div class="grid-item" onClick={() => setCounter(counter + 1)}>
<i class="fas fa-2x fa-angle-up"></i>
</div>
<div class="grid-item">{counter}</div>
<div class="grid-item" onClick={() => setCounter(counter - 1)}>
<i class="fas fa-2x fa-angle-down"></i>
</div>
<div class="grid-item" onClick={() => setCounter(0)}>
Reset
</div>
</div>
);
}
export default App;
Now here is the App.css content ( for styling ) :
.grid-container {
display: grid;
grid-template-columns: auto auto;
background-color: #50404d;
height: 200px;
width: 200px;
}
.grid-item {
border: 1px solid #fff;
color: #fff;
padding: 30px 0;
font-size: 20px;
text-align: center;
}
Note: for the icons to work you need to add this piece of code in "public/index.html" inside the <header> tag :
<script
src="https://kit.fontawesome.com/a076d05399.js"
crossorigin="anonymous"
></script>
I hope this simple solution helps you get an idea .