I'm trying make an Input that can handle array(so inputs are dynamic n+) with formik in react native. It works but typescript complains with "object is posibly undefined" and "Element implicitly has an 'any' type because index expression is not of type 'number'" also the code is really ugly I don't like it, is there another way to make this ?. I think my problem is defined the type of formikProps in FormikPropsWrap.
formikProps have errors, touched and values property but if I didn't interact with the form errors and touched can be empty like this.
{values: {menus: [{name: 'dish1'price: '10'}, ...]}errors: {},touched: {}}
after interact
{values: {menus: [{name: 'dish1'price: '10'}, ...]}errors: {menus: [{name: 'errorx', price: 'error' }],touched: {menus: [{name: true, price: true }]}}
An example of this props are:
preFormikKey = 'menus'
index = 0 // can be N
postFormikKey = 'name' // can be price or name
Interfaces
interface ComponentProps { formikKey: string; preFormikKey?: string; index?: number; postFormikKey?: string;}interface InitialState { [key: string]: string | any[];}interface FormikPropsWrap { formikProps: FormikProps<InitialState>;}
Ugly code
if (preFormikKey) { if (index || index === 0) { if (postFormikKey) { if (preFormikKey in formikProps.errors) { const errorMenus: any = formikProps.errors[preFormikKey]; if (index in errorMenus) { // line below object is posibly undefined const errorMenuIndex: any = formikProps.errors[preFormikKey][index]; if (postFormikKey in errorMenuIndex) { // line below object is posibly undefined //and "Element implicitly has an 'any' type because index expression is not of type 'number'" in postFormikKey errorMessage = formikProps.errors[preFormikKey][index][postFormikKey]; } } } if (preFormikKey in formikProps.values) { const valuesMenus: any = formikProps.values[preFormikKey]; if (index in valuesMenus) { const valuesMenuIndex: any = formikProps.values[preFormikKey][index]; if (postFormikKey in valuesMenuIndex) { value = formikProps.values[preFormikKey][index][postFormikKey]; } } } if (preFormikKey in formikProps.touched) { const touchedMenus: any = formikProps.touched[preFormikKey]; if (index in touchedMenus) { const touchedMenuIndex: any = formikProps.touched[preFormikKey][index]; if (postFormikKey in touchedMenuIndex) { touched = formikProps.touched[preFormikKey][index][postFormikKey]; } } } } } }