У меня есть форма Formik в react native, где у меня есть массив полей с рядом вопросов. В одном из вопросов есть настраиваемый компонент, из которого пользователь может выбрать, и если он выберет «поменял любые шины», появится другой компонент. Это отлично работает, но я не могу понять, как указать c только для элемента массива, в котором они находятся. Это отображается во всех элементах массива.
Любая помощь будет принята с благодарностью.
<Formik
enableReinitialize={true}
initialValues={initialState}
validationSchema={validationSchema}
onSubmit={(values, actions) => {
console.log(values);
}}
>
{props => (
<Form>
<View>
<MyDatePicker
label="Date"
name="tsDate"
/>
<FieldArray
name="timesheets"
render={arrayHelpers => (
<>
{props.values.timesheets &&
(
props.values.timesheets.map((timesheet, index) => (
<View>
<Select
label="Have you..."
name={`timesheets.[${index}].accessory`}
items={[
{ label: 'N/A', value: 'N/A', key: 1 },
{ label: 'useed a Light Vehicle', value: 'useed a Light Vehicle', key: 2 },
{ label: 'changed any GET', value: 'changed any GET', key: 3 },
{ label: 'changed any Tyres', value: 'changed any Tyres', key: 4 },
{ label: 'used a Rock Breaker', value: 'used a Rock Breaker', key: 5 },
{ label: 'used a Trailer', value: 'used a Trailer', key: 6 },
{ label: 'used a GPS', value: 'used a GPS', key: 7 },
]}
/>
{(props.values.timesheets.some((timesheet) => (timesheet.accessory === ('changed any Tyres') )) )
?
<View>
<Select
label="What type of Tyres"
name={`timesheets.[${index}].tyresType`}
items={[
{ label: 'Front RH, LH', value: 'Front RH, LH', key: 1 },
{ label: 'Rear RH, LH', value: 'Rear RH, LH', key: 2 },
{ label: 'Spare', value: 'Spare', key: 3 },
]}
/>
</View>
:
<View>
{console.log('Hide Rock Breaker!')}
</View>
}
{props.values.timesheets.length === 1 ? (
<View style={{ flexDirection: 'row', justifyContent: 'center', paddingTop: 20, paddingBottom: 0 }}>
<TouchableOpacity style={cvstyles.arrayButtons} onPress={() => arrayHelpers.push(index, '')}>
<Text style={{ color: '#fff' }} >Add Entry</Text>
</TouchableOpacity>
</View>
) : (
<View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingTop: 20, paddingBottom: 0 }}>
<TouchableOpacity style={cvstyles.arrayButtons} onPress={() => arrayHelpers.push(index, '')}>
<Text style={{ color: '#fff' }} >Add Entry</Text>
</TouchableOpacity>
<TouchableOpacity style={[cvstyles.arrayButtons, { marginRight: '2%' }]} onPress={() => arrayHelpers.remove(index)}>
<Text style={{ color: '#fff' }} >Remove Entry</Text>
</TouchableOpacity>
</View>
)}
</View>
</>
)}
/>
</Form>
)}
</Formik>