Adding paddingLeft if activeIcon is passed in React native-CodePudding

On my typescript props I have the ff:

interface Props {
  activeIcon: any;
  inactiveIcon: any;
}

On my TextInput, I am trying to check if activeIcon or inactiveIcon are passed in or not. If they are not passed in, I want to add paddingLeft to the TextInput like this:

<TextInput
        placeholder={placeholderText}
        {...restOfProps}
        onFocus={handleFocus}
        onBlur={handleBlur}
        style={[styles.input, {(activeIcon || inactiveIcon) ? paddingLeft: 15 } ]}
      />

As you can see on my code style={[styles.input, {(activeIcon || inactiveIcon) ? paddingLeft: 15 } ]} I am trying to do this using an array of styles. However this is returning some error:

Property assignment expected.ts(1136). Property assignment expected.ts(1136).

What is the proper way to do this? `

CodePudding user response：

Well, the {(activeIcon || inactiveIcon) ? paddingLeft: 15 } isn't valid.

You should either pass the entire object or a different padding based on your condition.

Example 1:

style={[
  styles.input,
  (activeIcon || inactiveIcon) ? undefined : { paddingLeft: 15 },
]}

Example 2:

style={[
  styles.input,
  { paddingLeft: (activeIcon || inactiveIcon) ? 0 : 15 },
]}

You might want to read about the ternary conditional operator here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator