get input value using custom numbers in react - reactjs

Question

i have custom numpad and input box and i want that when user click any number it shows in input field.
<div class="grid-container">
<button class="grid-item" onClick={inputNumKey}>1</button>
<button class="grid-item" onClick={inputNumKey}>2</button>
<button class="grid-item" onClick={inputNumKey}>3</button>
<button class="grid-item" onClick={inputNumKey}>4</button>
<button class="grid-item" onClick={inputNumKey}>5</button>
<button class="grid-item" onClick={inputNumKey}>6</button>
<button class="grid-item" onClick={inputNumKey}>7</button>
<button class="grid-item" onClick={inputNumKey}>8</button>
<button class="grid-item" onClick={inputNumKey}>9</button>
<button class="grid-item" onClick={inputNumKey}>*</button>
<button class="grid-item" onClick={inputNumKey}>0</button>
<button class="grid-item" onClick={inputNumKey}>#</button>
</div>
this is my numpad jsx code.
<div className="input-box-ad">
<input onChange={changeTime} name="hour" value={updatedHour} />
<input onChange={changeTime} name="minute" value={updatedMinute} />
<input onChange={changeTime} name="second" value={updatedSecond} />
</div>
this is input fields i want values of this button.
for more details i have codesandbox also - https://codesandbox.io/s/fancy-frog-l5uo2

Answer 1

const activeInput = { "background-color": "#BBFFCC" };
const Numbers = () => {
const [hour, setHour] = useState("00");
const [minute, setMinute] = useState("00");
const [second, setSecond] = useState("00");
const [timeType, setTimeType] = useState("hour");
const press = (k) => {
const [value, setter] =
timeType === "hour"
? [hour, setHour]
: timeType === "minute"
? [minute, setMinute]
: [second, setSecond];
setter((value.charAt(value.length - 1) || "0") + k);
};
return (
<div>
<div class="grid-container">
<button onClick={() => press("1")}>1</button>
<button onClick={() => press("2")}>2</button>
<button onClick={() => press("3")}>3</button>
<button onClick={() => press("4")}>4</button>
<button onClick={() => press("5")}>5</button>
<button onClick={() => press("6")}>6</button>
<button onClick={() => press("7")}>7</button>
<button onClick={() => press("8")}>8</button>
<button onClick={() => press("9")}>9</button>
<button onClick={() => press("*")}>*</button>
<button onClick={() => press("0")}>0</button>
<button onClick={() => press("#")}>#</button>
</div>
<div className="input-box-ad">
<input name={"hour"} value={hour} size={2}
onClick={() => setTimeType("hour")}
onChange={(e) => setHour(e.target.value)}
style={timeType === "hour" ? activeInput : {}}
/>
:
<input name={"minute"} value={minute} size={2}
onClick={() => setTimeType("minute")}
onChange={(e) => setMinute(e.target.value)}
style={timeType === "minute" ? activeInput : {}}
/>
:
<input name={"second"} value={second} size={2}
onClick={() => setTimeType("second")}
onChange={(e) => setSecond(e.target.value)}
style={timeType === "second" ? activeInput : {}}
/>
</div>
</div>
);
};

Answer 2

This is going to be very difficult to manage. I don't know why do you need the buttons to enter input you can do it with the keyboard.
If you do it with a keyboard then it will be easy.
const[updatedHour,setUpdatedHour] = useState();
function changeHour(e){
setUpdatedHour(e.target.value)
}
<input onChange={changeHour} name="hour" value={updatedHour} />
Do the same for all input boxes.
Still, if you want to do it with buttons here is a hint.
function inputNumKey(e){
console.log(e.target.textContent)
}