1

I use this approach to set default props:

TextInputField.defaultProps = {
  isMultiline: false
}

But that gives me this error:

Property 'defaultProps' does not exist on type 'typeof TextInputField'.

What am I missing?

import * as React from "react"
import { Text, TextInput, View } from "react-native"
import MyButton from "./MyButton"
import { colors } from "../styles/colors"
import { styles } from "../styles/form-elements"


interface IComponentState {
  textInputValue: string
}

interface IComponentProps {
  isMultiline: boolean
  keyboardType?: any
  label?: string
  nextButtonText?: string
  onSubmit?: () => void
  placeholderText?: string
  showNextButton?: boolean
}


export default class TextInputField extends React.Component<IComponentProps, IComponentState> {

    constructor(props: IComponentProps) {
        super(props)
    }

    public render() {
        const {
        keyboardType,
        label,
        nextButtonText,
        onSubmit,
        placeholderText,
        showNextButton,
        isMultiline
        } = this.props

    const textBoxHeight = isMultiline ? 150 : 50

        return (
        <View>
          <Text style={styles.label}> {this.props.label} </Text>
          <TextInput
            multiline={isMultiline}
            numberOfLines={5}
            style={[styles.textInput, { height: textBoxHeight }]}
            placeholder={placeholderText}
            placeholderTextColor={colors.light_gray}
            keyboardType={keyboardType}
            onBlur={showNextButton ? undefined : onSubmit}
          />

          {showNextButton &&
            <MyButton
              title={nextButtonText}
              onPress={onSubmit}
            />
          }
        </View>
    )

  }
}

/********************** 

This gives the error:
`Property 'defaultProps' does not exist on type 'typeof TextInputField'.`

**************************/
TextInputField.defaultProps = {
  isMultiline: false,
  nextButtonText: "Next",
  onSubmit: () => true,
  showNextButton: true,
}
1

1 Answer 1

0

You can also do the same like this.

export default class TextInputField extends React.Component<IComponentProps, IComponentState> {

    constructor(props: IComponentProps) {
        super(props)
    }
    static defaultProps = {
       isMultiline: false,
       nextButtonText: "Next",
       onSubmit: () => true,
       showNextButton: true,
    }
    public render() {
        const {
        keyboardType,
        label,
        nextButtonText,
        onSubmit,
        placeholderText,
        showNextButton,
        isMultiline
        } = this.props

    const textBoxHeight = isMultiline ? 150 : 50

        return (
        <View>
          <Text style={styles.label}> {this.props.label} </Text>
          <TextInput
            multiline={isMultiline}
            numberOfLines={5}
            style={[styles.textInput, { height: textBoxHeight }]}
            placeholder={placeholderText}
            placeholderTextColor={colors.light_gray}
            keyboardType={keyboardType}
            onBlur={showNextButton ? undefined : onSubmit}
          />

          {showNextButton &&
            <MyButton
              title={nextButtonText}
              onPress={onSubmit}
            />
          }
        </View>
    )

  }
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.