How to get each item's value in React.js - reactjs

Question

const [state, setState] = useState("");
<input onChange={e=>setState(e.target.value)}
I know that I can use onChange={} to get each value but I want to get the
(shirts x pants x shoes) when a button onClick={} event happens
function Somethingie() {
return (
<div>
Shirts: <input className="one" type="number"></input>
Pants: <input className="two" type="number"></input>
Shoes: <input className="three" type="number"></input>
<br /> <br />
<button
onClick={() => {
console.log(
document.querySelector(".one").value *
document.querySelector(".two").value *
document.querySelector(".three").value
);
}}
>
Calculate!
</button>
<br /> <br />
Amount of Possible Outfits: <h1 className="result"></h1>
</div>
);
}
ReactDOM.render(
<Somethingie />,
document.getElementById("root")
);
or do I create an async function?

Answer 1

I would create a state for each input, set the value of the respective input to this state, set the state for each input onChange, and finally, in the onClick of the button just combine the three states.
Example input:
const [state1, setState1] = useState("")
...
const change1 = (e) => {
setState1(e.target.value);
}
...
<input className="one" type="number" value={state1} onChange={change1}/>
onClick of the button
const handleClick = () => {
result = state1 * state2 * state3;
}

Answer 2

function Somethingie() {
return (
<div>
Shirts: <input className="one" type="number"></input>
Pants: <input className="two" type="number"></input>
Shoes: <input className="three" type="number"></input>
<br /> <br />
<button
onClick={() => {
let x = document.getElementsByClassName('result');
x[0].innerHTML =
document.querySelector('.one').value *
document.querySelector('.two').value *
document.querySelector('.three').value;
}}
>
Calculate!
</button>
<br /> <br />
Amount of Possible Outfits: <h1 className="result"></h1>
</div>
);}
ReactDOM.render(
<Somethingie />,
document.getElementById("root")
);
You can directly place calculated value as shown in above code snippet.

Answer 3

You need to keep each of the data in its own useState like this:
import { useState } from "react";
const Combinations = () => {
const [shirts, setShirts] = useState(0);
const [pants, setPants] = useState(0);
const [shoes, setShoes] = useState(0);
const [total, setTotal] = useState(0);
const onChange = (e) => {
console.log(e);
console.log(typeof e.target.value);
console.log(Number(e.target.value));
if (e.target.name === "shirts") setShirts(Number(e.target.value));
if (e.target.name === "pants") setPants(Number(e.target.value));
if (e.target.name === "shoes") setShoes(Number(e.target.value));
};
const calculate = () => {
let all = null;
if (shirts !== 0) {
if (all === null) {
all = shirts;
} else {
all *= shirts;
}
}
if (pants !== 0) {
if (all === null) {
all = pants;
} else {
all *= pants;
}
}
if (shoes !== 0) {
if (all === null) {
all = shoes;
} else {
all *= shoes;
}
}
setTotal(all);
};
return (
<div>
<label htmlFor="shirts">Shirts: </label>
<input
type="number"
id="shirts"
name="shirts"
value={shirts}
onChange={onChange}
/>
<br />
<label htmlFor="pants">Pants: </label>
<input
type="number"
id="pants"
name="pants"
value={pants}
onChange={onChange}
/>
<br />
<label htmlFor="shoes">Shoes: </label>
<input
type="number"
id="shoes"
name="shoes"
value={shoes}
onChange={onChange}
/>
<br />
<button onClick={calculate}>Calculate!</button>
<br />
<p>Amount of Possible Outfits: {total}</p>
</div>
);
}