availity-reactstrap-validation icon indicating copy to clipboard operation
availity-reactstrap-validation copied to clipboard

How to update the custom value to the Avinput on change of state

Open akhilesh-slk opened this issue 5 years ago • 4 comments

I am using Avinput and and Avform in form I am sending the model as a props to populate the default values. First time data load successfully.

            <AvForm
                 onValidSubmit={this.handleSubmit}
                 className="main-form"
                 model={data}
           >
             <AvInput
                  name="capacity"
                  type="text"
                  className="col-md-9"
                  id="capacity"
                  placeholder="Required Capacity"
                  value={formvalue ? formvalue.capacity : ""}
                  required,
                  onChange={this.handleChange}
                />

                <AvInput
                     type="select"
                     name="capacity_unit"
                     id="capacity_unit"
                     placeholder=" Unit"
                    className="col-md-3 unit"
                    onChange={this.onUnitChange}
                >

On Change of unit Change I am reading the current value of capacity and converting the value and updating the state. But updated value is not reflecting in the input.

akhilesh-slk avatar Feb 10 '20 07:02 akhilesh-slk

The model prop is only for initial values and is not for the whole state. If you want to manage the value prop yourself pass it to the input itself

GoPro16 avatar Feb 10 '20 14:02 GoPro16

Hey @akhilesh-slk did you find a solution? I have the same situation, after the user populate the zipcode i want to complete street address and another fields with the return of address check api and i dont know how can i populate this specifcs fields

NableLucas avatar Oct 19 '20 19:10 NableLucas

@NableLucas value attribute in AvInput would do the magic <AvInput value={this.state.unit} type="select" name="capacity_unit" id="capacity_unit" placeholder=" Unit" className="col-md-3 unit" onChange={this.onUnitChange} >

untaljohanperez avatar Dec 17 '20 20:12 untaljohanperez

I have the same issue and the value prop solves the problem for except for AvInput type="checkbox". When I a Checkbox the value will also be updated on the first load and not when I am changing the value in the state.

smox avatar Mar 14 '21 07:03 smox