React Native call onChange on textinput when state change through network call - react-native

Question

I have a dropdown list once change a network call is fire and getting some value from server now i would like to dynamicall change the input value but onchange is not firing once i am setting the state after network call.
Input screen with render
<SearchableDropdown style={styles.inputBox}
onTextChange={this.onChangeText}
selectedItems={this.state.selectedItems}
onItemSelect={(item) => {
const items = this.state.selectedItems;
this.setState({ serviceid: JSON.stringify(item.id) });
this.getServiceCategories(JSON.stringify(item.id))
this.setState({
CategoryName:this.state.CategoryName
});
}}
containerStyle={{ padding: 5 }}
textInputStyle={{
padding: 12,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 15,
color: '#000',
width:300
}}
itemStyle={{
padding: 10,
marginTop: 2,
backgroundColor: '#ddd',
borderColor: '#fff',
borderWidth: 1,
borderRadius: 15,
color: '#000',
}}
itemTextStyle={{ color: '#000' }}
itemsContainerStyle={{ maxHeight: 240 }}
items={this.state.serviceData}
defaultIndex={0}
placeholder="Select Service"
name="serviceid"
resetValue={false}
underlineColorAndroid="transparent"
/>
<Field style={styles.inputBox}
name="categoryid"
value={this.state.CategoryName}
placeholder="Category"
returnKeyLabel={this.state.CategoryID}
component={this.renderTextInput}
/>
<Field style={styles.inputBox}
name="subcategoryid"
value={this.state.SubCategoryName}
returnKeyLabel={this.state.SubCategoryID}
placeholder="Sub Category"
component={this.renderTextInput}
/>
Renderinput
renderTextInput = (field) => {
const {meta: {touched, error}, label, secureTextEntry, maxLength,value, keyboardType, placeholder, input: {onChange, ...restInput}} = field;
return (
<View>
<InputText
onChangeText={onChange}
maxLength={maxLength}
keyboardType={keyboardType}
secureTextEntry={secureTextEntry}
label={label}
{...restInput} />
{(touched && error) && <Text style={styles.errorText}>{error}</Text>}
</View>
);
}
}
input component
class InputText extends Component<{}> {
state = {
value: ""
}
componentDidMount() {
this.setState({
value: this.props.value
});
}
onChangeText = (value) => {
this.setState({
value
}, () => {
this.props.onChangeText(value);
})
}
render() {
const {placeholder, secureTextEntry, keyboardType, maxLength, onChangeText, onSubmitEditing,value} = this.props;
return (
<View>
<TextInput
style={styles.inputBox}
underlineColorAndroid="rgba(0,0,0,0)"
placeholder={placeholder}
placeholderTextColor="rgba(255,255,255,0.8)"
selectionColor="#999999"
secureTextEntry={secureTextEntry}
keyboardType={keyboardType}
maxLength={maxLength}
returnKeyType="next"
value={this.state.value}
onSubmitEditing={onSubmitEditing}
onChangeText={this.onChangeText} />
</View>
);
}
}
Once dropdown change network api call
getServiceCategories =(value)=>{
fetch('http://localhost/api/getServiceCategories?serviceid='+value)
.then(response => { return response.json();})
.then(responseJson => {
this.setState({
CategoryID:responseJson[0].CategoryID,
SubCategoryID:responseJson[0].SubCategoryID,
CategoryName:responseJson[0].CategoryName,
SubCategoryName:responseJson[0].SubCategoryName,
});
})
.catch(error => {
console.error(error);
});
}
thanks

Answer 1

The problem is in your InputText component. This component is keeping the value inside its own state and sets the text input value from its state, rather than using the value from the props.
You have two choices: remove the state from the component and use only the value from the props - in this way your component will be controlled by the parent:
class InputText extends Component<{}> {
render() {
const {placeholder, secureTextEntry, keyboardType, maxLength, onChangeText, onSubmitEditing,value} = this.props;
return (
<View>
<TextInput
style={styles.inputBox}
underlineColorAndroid="rgba(0,0,0,0)"
placeholder={placeholder}
placeholderTextColor="rgba(255,255,255,0.8)"
selectionColor="#999999"
secureTextEntry={secureTextEntry}
keyboardType={keyboardType}
maxLength={maxLength}
returnKeyType="next"
value={value} // Use `value` from props
onSubmitEditing={onSubmitEditing}
onChangeText={onChangeText} /> // Use `onChangeText` from props
</View>
);
}
}
Or keep the state, and pass the value from its props to the TextInput and keep the state value as a fallback, in the case when the prop value is not set.
class InputText extends Component<{}> {
state = {
value: ""
}
componentDidMount() {
this.setState({
value: this.props.value
});
}
onChangeText = (value) => {
this.setState({
value
}, () => {
this.props.onChangeText(value);
})
}
render() {
const {placeholder, secureTextEntry, keyboardType, maxLength, onChangeText, onSubmitEditing,value} = this.props;
return (
<View>
<TextInput
style={styles.inputBox}
underlineColorAndroid="rgba(0,0,0,0)"
placeholder={placeholder}
placeholderTextColor="rgba(255,255,255,0.8)"
selectionColor="#999999"
secureTextEntry={secureTextEntry}
keyboardType={keyboardType}
maxLength={maxLength}
returnKeyType="next"
value={value || this.state.value} // Note that now the value is the value from the props and if it will be falsey, then the state value will be used as a fallback.
onSubmitEditing={onSubmitEditing}
onChangeText={this.onChangeText} />
</View>
);
}
}