React - cannot set value of input box

Question

I am using React and have the following component:

import React from 'react';

function Calculate({ work }) {

    var inputValue = 0;

    const totalAmountToBePaid = () => {
        inputValue++;
        console.log("=====> Total Amount To Be Paid", work);
        console.log(inputValue);
    };

    return (
        <div>
            <header className="App-header">
                <input type="number" id="amount" value={inputValue} readOnly></input>
                <button onClick={totalAmountToBePaid}>Total Amount To Be Paid</button>
            </header>
        </div>
    )
}

export default Calculate;

When I click the button, I need it to update value of the input by calling the totalAmountToBePaid function.

The above solution just leave the value of the input on its default value of 0.

I am new to React, so please excuse my ignorance. I think I might need to gave a state object.

Thank you

React updates DOM once the state is changed, so you should add inputValue to the state inorder to reflect the change. — BhaskerYadav
– BhaskerYadav, Commented Oct 23, 2019 at 9:23

Sandip Nirmal · Accepted Answer · 2019-10-23 09:25:03Z

3

Yes, you are missing the state object.

Replace it with following

function Calculate({ work }) {
  const [inputValue, setInputValue] = React.useState(0)

    const totalAmountToBePaid = () => {

      setInputValue(inputValue+1);

        console.log("=====> Total Amount To Be Paid", work);
        console.log(inputValue);
    };

    return (
        <div>
            <header className="App-header">
                <input type="number" id="amount" value={inputValue} readOnly></input>
                <button onClick={totalAmountToBePaid}>Total Amount To Be Paid</button>
            </header>
        </div>
    )
}

Working Example https://codesandbox.io/s/dank-pine-9hk26

Since you are new to React, I think you should go through React docs. https://reactjs.org/docs/state-and-lifecycle.html to understand basics.

edited Oct 23, 2019 at 9:25

answered Oct 23, 2019 at 9:22

Sandip Nirmal

2,48923 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Charlie · Accepted Answer · 2019-10-23 09:25:58Z

0

If you dont need the console.logs you can just do;

const [inputValue, setInputValue] = useState(0);

<button onClick={() => setInputValue(inputValue+1)}>Total Amount To Be Paid</button>

answered Oct 23, 2019 at 9:25

Charlie

1621 silver badge8 bronze badges

Collectives™ on Stack Overflow

React - cannot set value of input box

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related