Beginner friendly docs

I wanted to bring attention to something I’ve experienced when integrating this component into the app I’m building. I like this component a lot as it covers accessibility and gives me a lot of flexibility in styling and functionality. I’ve gone through a lot of autocompletes before I found this one, so thank you.

But perhaps a more beginner friendly documentation would be useful for people like me who are junior web developers that rely on these solutions. In particular, I couldn’t figure out when to use onStateChange and onInputValueChange properly because I kept thinking of uncontrolled components as those handled by the DOM that make use of refs, while controlled components as state based. It took time and my co-worker to point out that I was thinking about this in the wrong context.

onInputValueChange can be elaborated on and the definition of “controlled” in this context can be more clear as it is done in the explanation of onStateChange. More on why they are different and how to use them.

More examples explaining how to use some of the functions, such as onOuterClick and getRootProps could also help.

With that said, thanks for building this. There are a lot of advanced topics covered like render props vs HOC and I appreciate all the links that explain these topics. I’m learning a lot in the process.

[kentcdodds]

Thanks for the feedback! We definitely could use improved docs. I’m also thinking that I’ll make a video course for egghead.io about downshift which should help!

[ghost]

hi @kentcdodds I finally figure it out 😃 i was passing in rendresuggestion( itemProps: getItemProps({ item: suggestion.label }), instead of suggestion.label now i am passing the whole object of what was selected ," itemProps: getItemProps({ item: suggestion }), " .

2)Then i am passing to my Downshift itemToString={this.itemToString} onChange={this.handleChange} the itemstring you told me about earlier , and now from my onchange am getting the id of what was selected so i can save it later. here is a working example. now am trying to figure out where to put a text when no matches are found . https://codesandbox.io/s/yjy7859p0x