Я пытаюсь создать форму для пользователей, чтобы заполнить их платежные данные при оформлении заказа. Для этого я использую Formik. У меня есть поля страны и штата в качестве сборщиков, и я хочу, чтобы состояния менялись динамически в зависимости от ввода страны. Как я могу это реализовать? Если пользователь выбирает Канаду, я хочу, чтобы отображались провинции, а если они вводят США, я хочу, чтобы отображались штаты. Я не уверен, могу ли я использовать здесь условный рендеринг, потому что он находится в свойствах formik и должен динамически меняться:
<Formik
initialValues={{
first_name: '',
last_name: '',
address_1: '',
address_2: '',
city: '',
state: '',
postcode: '',
country: '',
email: 'john.doe@example.com',
phone: '647-274-8068',
}}
// Form submission action
onSubmit={async (values) => {
addData(values);
}}>
{(props) => (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : null}
style={{flex: 1}}>
<ScrollView style={styles.inner}>
<TextInput
style={styles.input}
placeholder="first name"
onChangeText={props.handleChange('first_name')}
value={props.values.first_name}
/>
<TextInput
style={styles.input}
placeholder="last name"
onChangeText={props.handleChange('last_name')}
value={props.values.last_name}
/>
<TextInput
style={styles.input}
placeholder="Street Address"
onChangeText={props.handleChange('address_1')}
value={props.values.address_1}
/>
<TextInput
style={styles.input}
placeholder="Unit"
onChangeText={props.handleChange('address_2')}
value={props.values.address_2}
/>
<TextInput
style={styles.input}
placeholder="City"
onChangeText={props.handleChange('city')}
value={props.values.city}
/>
<Picker
selectedValue={props.values.country}
onValueChange={props.handleChange('country')}>
<Picker.Item label="Canada" value="CA" />
<Picker.Item label="USA" value="US" />
</Picker>
<Picker
selectedValue={props.values.state}
onValueChange={props.handleChange('state')}>
<Picker.Item label="Alberta" value="AB" />
<Picker.Item label="British Columbia" value="BC" />
<Picker.Item label="Manitoba" value="MB" />
<Picker.Item label="New Brunswick" value="NB" />
<Picker.Item label="Newfoundland and Labrador" value="NL" />
<Picker.Item label="Northwest Territories" value="NT" />
<Picker.Item label="Nova Scotia" value="NS" />
<Picker.Item label="Nunavut" value="NU" />
<Picker.Item label="Ontario" value="ON" />
<Picker.Item label="Prince Edward Island" value="PE" />
<Picker.Item label="Quebec" value="QC" />
<Picker.Item label="Saskatchewan" value="SK" />
<Picker.Item label="Yukon" value="YT" />
</Picker>
<TextInput
style={styles.input}
placeholder="Postal Code"
onChangeText={props.handleChange('postcode')}
value={props.values.postcode}
/>
<Button
title="place order"
color="maroon"
onPress={props.handleSubmit}
/>
</ScrollView>
</KeyboardAvoidingView>
)}
</Formik>
Приведенный выше код находится в моем операторе возврата