Reactjs - Change the value of state based on a input field when the state has a default value?-CodePudding

I am working with a Firebase project and I have a project in my database which has a pledge1 field with a default value of 25.

I have two input fields where one is a button and the other is for text. I want the button to have a default value of "Pledge $25" and the input field to represent an additional amount of money to pledge. And I want the button's value to update based on how much additional value is in the other input field.

So if a user decides to add additional $10, the button's value should update to "Pledge $35" and if the user deletes the "0" from the "10", the button will update to say "Pledge $26"

This is what I have so far:


useEffect(() => {
    onSnapshot(q, (snapshot) => {
        let project = [];
        snapshot.docs.forEach((doc) => {
            project.push({ ...doc.data(), id: doc.id });
        })
        setProject(project)
        let amount = 0;
        project.map((project) => {
            amount = parseInt(project.pledge1);
        })
        setPledgeAmount(amount);
        setOriginalPledgeAmount(amount);
    })
}, [])

With this useEffect function I wait until the data is grabbed from firebase, and I set the state to the pledge amount. I then display that state in the input fields:

<div className="pledge-input">
    <input
        type="input"
        className="pledge-input-amount"
        placeholder="10"
        onChange={(e) => {
            let number = e.currentTarget.value;
            if (number >= 1) {
                setPledgeAmount(pledgeAmount   parseInt(number));
            }
            if (number === "") {
                setPledgeAmount(originalPledgeAmount);
            }
        }}
    />
    <input
        type="button"
        className="pledge-btn"
        value={`Pledge $${pledgeAmount}`}
    />
</div>

This only works if you add a single digit number and delete it, the problem is that if you write double digit numbers or higher,like 10, the value goes from 25 -> 26 -> 36 because it adds each digit that is added to the input field. And each time you delete a digit it adds the remaining digits to the state.

How can I make it only register the numbers added as entire numbers so when a user types in 50, the value of the state goes from 25 -> 75 and not 25 -> 30 -> 80

And how do I make it so when a digit is deleted it subtracts from the state and does not add to it. So if the additional value is 50 (25 50 = 75) and the zero gets deleted, it goes from 75 -> 30 (25 5) and not from 75 -> 80 (75 5)?

CodePudding user response：

You could try to use onBlur instead of setting state based on the value change. This way, the user would be able to enter the amount in the input, and the button would update to the correct amount once the user tabs out or clicks out of the input.

CodePudding user response：

SOLVED:

<div className="pledge-input">
    <input
        type="input"
        className="pledge-input-amount"
        placeholder="10"
        onChange={(e) => {
            let number = e.currentTarget.value;
            if (number >= 1) {
                setPledgeAmount(parseInt(number));
            }
            else {
                setPledgeAmount(parseInt(0));
            }
        }}
    />
    <input
        type="button"
        className="pledge-btn"
        value={
            pledgeAmount >= 1 ?
                `Pledge $${parseInt(project.pledge1)   pledgeAmount}`
                :
                `Pledge $${parseInt(project.pledge1)}`
        }
    />
</div>