Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6213

Avoid object is possibly undefined

$
0
0

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];                            }                        }                    }                }            }        }

Viewing all articles
Browse latest Browse all 6213

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>