Not able to use 'clickedValue' value in input field, why?

JavaScript
#1 
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>
  )
}
#2

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
#3

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?

#4

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.