Search code examples
reactjsdownshift

getInputProps in Downshift

When I render the input element when using Downshift, is it wrong to do

<input {...getInputProps({...this.props})} />

or should I be more specific in which attributes are passed in the object to getInputProps?

{...getInputProps({placeholder: this.props.placeholder})}

The later would not then let me add other attributes (e.g. data-testid:controlName) without changing my source control to specifically look for it

Solution

  • According to the docs, you should pass all props as an object for the input element. I have not personally used downshift, but I would imagine this would work (and it's always good practice to only pass what you need without additional "clutter"):

    <input {...getInputProps({
    placeholder: this.props.placeholder,
    data-testid: controlName,
    moreProps: this.props.additionalInfo
})} />

    However, to be more direct towards your original question, as long as your properties in this.props are tagged appropriately (i.e. placeholder: placeholderValue) there shouldn't be any problem with spreading this.props as the paramater for getInputProps().