How can I set default values for props on a React TypeScript component?

Question

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,
}

Answer 1

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>
    )

  }
}