Cannot read property 'query' of null in react js

Question

i have applied pagination in react-redux process, and trying to get query parameter in "mapStateToProps" function but getting below error - calling browser url is - http://localhost:3000/blog-list?page_no=1

here is my component's code snippet -

import React from 'react'; 
import StaticLayout from '../Layout/StaticLayout';
import { getBlogList } from '../actions/signupActions';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; 

import { Pagination } from 'react-bootstrap'; 
import { push } from 'react-router-redux'; 


class BlogList extends React.Component {
    constructor(props){
        super(props);
        document.title = "Blogs";

        this.changePage = this.changePage.bind(this);
    }

    componentDidMount() {
        this.props.getBlogList();
    }

    render(){

        //===pagination variable========
        const per_page = 1;
        let pages = 0;
        if(this.props.blogListData !== undefined){
            pages = Math.ceil(this.props.blogListData.count / per_page) ;
        } 
        const current_page = this.props.page;
        const start_offset = (current_page - 1) * per_page;
        let start_count = 0;
        //===End pagination variable========


        return(
            <StaticLayout>
                <html content with require list />
                <Pagination className="users-pagination pull-right" bsSize="medium" maxButtons={10} first last next prev boundaryLinks items={pages} activePage={current_page} onSelect={this.changePage} />

            </StaticLayout>
        );  
    }

    changePage(page){
        this.props.dispatch(push('/?page_no='+page))
    }


}

function mapStateToProps(state){
    return { 
        blogListData: state.UserReducer.blogData,
        page: Number(state.routing.locationBeforeTransitions.query.page_no) || 1,
    }
}
function mapDispatchToProps(dispatch) {
      return bindActionCreators({getBlogList: getBlogList}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps) (BlogList);

Please let me know what i am doing wrong, because in console you can see its giving up to routing.locationBeforeTransitions. not 'query'..

this.props.dispatch(push('/?page_no='+page)) should be different. Query params do not have trailing / — Ved
– Ved, Commented Jun 21, 2017 at 10:12
@ved , error is related to "mapStateToProps()" where i am returing 'page' . I didn't understand what do you want to say. — Atul
– Atul, Commented Jun 21, 2017 at 10:14
Replace Number(state.routing.locationBeforeTransitions.query.page_no) || 1 with state.routing && state.routing.locationBeforeTransitions && state.routing.locationBeforeTransitions.query && state.routing.locationBeforeTransitions.query.page_no || 1 — glennreyes
– glennreyes, Commented Jun 21, 2017 at 10:18
yes its works thanks #Glenn , but when i am clicking on "2" next pagination link its giving error - >>>> this.props.dispatch is not a function — Atul
– Atul, Commented Jun 21, 2017 at 10:23
And, I think its not picking value from query string, its always picking 1 from or condition.... — Atul
– Atul, Commented Jun 21, 2017 at 10:31

Shubham Khatri · Accepted Answer · 2017-06-21 11:08:48Z

1

You need to configure React-router-redux to be able to use state.routing.locationBeforeTransitions.query.page_no‌. However there are other ways to do it.

If you are using React-router v4, which I am assuming

You need to make use a separate library that supports query parsing, since its support was withdrawn from react-router v4

You can make use of query-string npm package

You can get the data like

import queryString from 'query-string'

function mapStateToProps(state, ownProps){
    var queryParam = queryString.parse(ownProps.location.search);
    return { 
        blogListData: state.UserReducer.blogData,
        page: Number(queryParam.get('page_no') || 1,
    }
}

answered Jun 21, 2017 at 11:08

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shubham Khatri Over a year ago

Happy to help Atul :)

Collectives™ on Stack Overflow

Cannot read property 'query' of null in react js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related