availity-reactstrap-validation
availity-reactstrap-validation copied to clipboard
How to update the custom value to the Avinput on change of state
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.
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
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 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} >
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.