Skip to content

Instantly share code, notes, and snippets.

@whichsteveyp
Created September 14, 2017 17:11
Show Gist options
  • Save whichsteveyp/61c742bb7c767668841672527333a944 to your computer and use it in GitHub Desktop.
Save whichsteveyp/61c742bb7c767668841672527333a944 to your computer and use it in GitHub Desktop.
Prop Getters?
import React from 'react';
import Downshift from 'downshift';
class Foo extends React.Component {
render() {
return <Downshift onChange={this.onChange}>
{(controls) => {
const {isOpen, inputValue, selectedItem, ...funcs} = controls;
return <div>
<label {...funcs.getLabelProps()}>Type things</label>
<input {...funcs.getInputProps()} />
</div>
}}
</Downshift>
}
}
import React from 'react';
import Downshift from 'downshift';
class Foo extends React.Component {
render() {
return <Downshift onChange={this.onChange}>
{(controls) => {
const {isOpen, inputValue, selectedItem, labelProps, inputProps,...funcs} = controls;
return <div>
<label {...labelProps, anOverride: true}>Type things</label>
<input {...inputProps} />
</div>
}}
</Downshift>
}
}
@whichsteveyp
Copy link
Author

I'm not sure I know the value of the getLabelProps(yourProps) vs {...inputProps, ...yourProps}. Does it letcha do other cool stuff I'm not aware of?

@kentcdodds
Copy link

Does it letcha do other cool stuff I'm not aware of?

Yes, with your example:

<input {...inputProps} onChange={this.handleChange} />

That just broke downshift... Because you overwrote inputProps.onChange.

So instead you would have to compose them together yourself so you run both your onChange handler and downshift's, and watch out for updates that remove onChange internally so you're not calling it...

With downshift, you do this instead:

<input {...getInputProps({onChange: this.handleChange})} />

And downshift will compose it together for you 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment