pbeshai / react-url-query

A library for managing state through query parameters in the URL in React
https://pbeshai.github.io/react-url-query
MIT License
195 stars 38 forks source link

Not getting onChange* functions in props #62

Closed bmakan closed 5 years ago

bmakan commented 5 years ago

Do you want to request a feature or report a bug? Bug.

What is the current behavior? I do not get onChange* functions passed automatically.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar. Tried multiple approaches, only the mapUrlToProps with mapUrlChangeHandlersToProps worked.

What is the expected behavior? onChange* functions should be passed to the props.

Which versions of react-url-query, and which browser and OS are affected by this issue? Did this work in previous versions of react-url-query? react-router 4.3.1 react 16.6.3 react-url-query 1.4.0

Firefox 63.0.3 64-bin, CentOS 7.3.1611

I 1.1.4 - 1.4.0. None worked.

Code sample Index.js:

import { RouterToUrlQuery } from 'react-url-query';
...
<Provider store={reduxStore}>
    <Router>
        <RouterToUrlQuery>
            <CommonFilters />
        </RouterToUrlQuery>
    </Router>
</Provider>

Component using the react-url-query:

import { addUrlProps, UrlQueryParamTypes } from 'react-url-query';
...
const URL_PROPS_QUERY_CONFIG = {
    dataType: { type: UrlQueryParamTypes.string },
};
...
export default addUrlProps({ URL_PROPS_QUERY_CONFIG })(DataTypeSelector);

Expected function this.props.onChangeDataType but nothing was passed.

pbeshai commented 5 years ago

Hi @bmakan, thanks for filling out the form!

export default addUrlProps({ URL_PROPS_QUERY_CONFIG })(DataTypeSelector);

This is a misuse of the object literal shorthand. For your configuration to work, try

export default addUrlProps({ urlPropsQueryConfig: URL_PROPS_QUERY_CONFIG })(DataTypeSelector);
bmakan commented 5 years ago

Ah, what a stupid mistake. Of course, it doesn't work. Thanks for pointing it out. :)

pbeshai commented 5 years ago

😄 easy mistake to make, I do it all the time!