How not to reexplicit instance components properties in generic components?

Question

In react, I implement generic components like this :

export function CustomTextInput(props) {
    return (
        <TextInput
            placeholder={props.placeholder}
            onChangeText={props.onChangeText}
            style={{margin:20}}
        />
    )
}

And them I use them like this :

      <CustomTextInput
        placeholder="My placeholder"
        onChangeText={secretCode => setSecretCode(secretCode)}
      />

Is there a way not to have to re-explicit each property in the generic components ? For example, by defining generic components like that :

export function CustomTextInput(props) {
    return (
        <TextInput
            props={props}
            style={{margin:20}}
        />
    )
}

... while still keeping the same implementation for component instances.

Answer 1

You can transfer props using the spread syntax as follows.

export function CustomTextInput(props) {
    return (
        <TextInput
            {...props}
            style={{margin:20}}
        />
    )
}