How to pass a function to form input value in react js?

Question

I want to pass the function 'handleTaxInput' to value prop of input field to set the value of input field to whatever this function returns. But, on console.log(this.state.totalTaxInv) i'm getting undefined. I'm not getting actual state which i should be getting after running this.handleTaxAmount().

handleTaxAmount(){
        if(this.state.cgstsgstRate === 0 || this.state.cgstsgstRate === ""){
            return Number(this.state.amount) + Number(this.state.amount) * Number(this.state.igstRate / 100)
        } else if(this.state.igstRate === 0 || this.state.igstRate === ""){
            return Number(this.state.amount) + Number(this.state.amount) * Number(this.state.cgstsgstRate * 2 / 100)
        } else {
            return 0
        }
    }

                        <div>
                            <label>Total Inv. Amount</label>
                            <input name="totalInvAmt" placeholder={this.handleTaxAmount()} value={this.handleTaxAmount()}/>
                        </div>

I have already initialised all states using constructor .

Can you show us the full component? It’s not clear what you are trying to do, but you are not setting the state in any of the code in your question, so it’s not possible to see why you are expecting this.state.totalTaxInv to have a value — Chris
– Chris, Commented Jan 9, 2021 at 10:09
But your handleTaxAmount function only returns a value, it doesn’t set the value to the state. So I can’t see why you are expecting the state to change? Did you want the handleTaxAmount function to update the state? — Chris
– Chris, Commented Jan 9, 2021 at 10:24
yes. I want the handleTaxAmount function to update the state. Can you provide a way for this? — Abhishek Anand
– Abhishek Anand, Commented Jan 9, 2021 at 10:30

zero_cool · Accepted Answer · 2022-11-16 03:14:46Z

1

I can't comment, so I'll have to ask this way. Did you initialize the state using this.setState(...) or did you just assign the state like this.state = {...}?

It seems like you want the state to change after calling your function, but you don't set the state anywhere in your function with this.setState(...).

Also: Why are you using so many Number constructors?

Edit (Answer):

handleTaxAmount() {
    let result = 0;

    if (this.state.cgstsgstRate === 0 || this.state.cgstsgstRate === "") {
        result = Number(this.state.amount) + Number(this.state.amount) * Number(this.state.igstRate / 100);
    } else if (this.state.igstRate === 0 || this.state.igstRate === "") {
        result = Number(this.state.amount) + Number(this.state.amount) * Number(this.state.cgstsgstRate * 2 / 100);
    }

    this.setState({
        variableYouWantToChange: result
    });
}

And if you want the value of your input field to change with the state use:

<div>
    <label>Total Inv. Amount</label>
    <input name="totalInvAmt" placeholder={this.state.variableChangedByFunction} value={this.state.variableChangedByFunction}/>
</div>

If you want to bind every change of the input to run the function do:

<div>
    <label>Total Inv. Amount</label>
    <input name="totalInvAmt" placeholder={this.state.variableChangedByFunction} value={this.state.variableChangedByFunction} change={this.handleTaxAmount}/>
</div>

and run this.handleTaxAmount = this.handleTaxAmount.bind(this) in your constructor.

If you want more information about how to use a components state see the docs

edited Nov 16, 2022 at 3:14

zero_cool

4,2945 gold badges45 silver badges57 bronze badges

answered Jan 9, 2021 at 10:17

MrCodingB

2,3241 gold badge12 silver badges24 bronze badges

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

3 Comments

Abhishek Anand Over a year ago

Yes, I want to the state to change after calling the function.I have initialised state as this.state = {...}

Abhishek Anand Over a year ago

I wanted the return value as Number.But, I was getting them as a string. so i change them to number.

MrCodingB Over a year ago

Ok. Try ensuring that the properties in your state are always numbers.

Collectives™ on Stack Overflow

How to pass a function to form input value in react js?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related