Typescript - Representing the rest of a component’s parameters in an Interface

Question

I have a component of Input using the TextInput of React Native. This component must accept the property append, and any other property passed to it shall be assigned to the TextInput:

interface InputProps {
  append: string;
}

const Input: React.FC<InputProps> = ({append, ...props}) => {
  return (
    <>
      <Append>{append}</Append>

      <TextInput {...props} />
    </>
  )
}

Utilizing:

const Home: React.FC = () => {
  return (
    <View>
      <Input append="R$" placeholder="0,00" />
    </View>
  )
}

In this case, the property placeholder is highlighted as invalid because it does not exist in the interface that defines the properties accepted by the component Input.

Property 'placeholder' does not exist on type 'Instrinsicattributes & Inputprops & {Children?: Reactnode;} TS(2322)

I already followed some suggestions how to use the React.HTMLAttributes<HTMLElement>, but without success.

Answer 1

Friend try to pass the other properties you do not want to declare in the interface outside the structure, like this:

interface InputProps {
  append: string;
}

const Input: React.FC<InputProps> = ({append}: InputProps, ...props) => {
  return (
    <>
      <Append>{append}</Append>

      <TextInput {...props} />
    </>
  )
}