const Calculations = ({ clickedValue}) => {
const [input, setInput] = useState();
const [value, setValue] = useState();
const dataset = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const inputData = Number(input)
const handleInput = (e) => {
const clickedValue = e.target.value;
console.log(clickedValue);
}
return (
<div className="" style={{ padding: '20px' }}>
<div className="form-group text-center">
<Button variant="primary" className="m-1" value={1} onClick={handleInput}>1</Button>
<Button variant="primary" className="m-1" value={2} onClick={handleInput}>2</Button>
<Button variant="primary" className="m-1" value={3} onClick={handleInput}>3</Button>
<Button variant="primary" className="m-1" value={4} onClick={handleInput}>4</Button>
<Button variant="primary" className="m-1" value={5} onClick={handleInput}>5</Button>
<Button variant="primary" className="m-1" value={6} onClick={handleInput}>6</Button>
<Button variant="primary" className="m-1" value={7} onClick={handleInput}>7</Button>
<Button variant="primary" className="m-1" value={8} onClick={handleInput}>8</Button>
<Button variant="primary" className="m-1" value={9} onClick={handleInput}>9</Button>
<Button variant="primary" className="m-1" value={0} onClick={handleInput}>0</Button>
<Button variant="primary" className="m-1">+</Button>
<Button variant="primary" className="m-1">-</Button>
<Button variant="primary" className="m-1">*</Button>
<Button variant="primary" className="m-1">/</Button>
</div>
<input
className="form-control m-1 mt-3 mb-3"
placeholder="Enter the number"
type="number"
value={value}
onChange={(e) => { setValue(clickedValue) }} />
{dataset.map((data) => {
return (<li key={data}>{input} * {data} = {data * inputData}</li>)
})}
</div>
)
}
Iâve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the âpreformatted textâ tool in the editor (</>
) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Iâm confused. You have two âclickedvalueâ
const Calculations = ({ clickedValue}) => {
// ...
const handleInput = (e) => {
const clickedValue = e.target.value;
// ...
When you setValue here:
onChange={(e) => { setValue(clickedValue) }} />
which do you think it is using? When will that every change? Is there something else you should be using?
This is what i tried to ask i store the recent value of âclickedValueâ use âhandleInputâ function. but not able to use same value inside input field.