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

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 .