1

trying to use Griddle but it shows 'No results found'

import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';   
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { loadHeaders } from '../../redux/actions/header.actions';
import Griddle from 'griddle-react';
import HeaderRow from './HeaderRow';

class HeadersPage extends Component {

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

  render() {
    const { requestHeaders } = this.props;

    return (
      <DocumentTitle title={'Requests'}>
        <div className="container">
          <Griddle
            data={requestHeaders}
          />
        </div>
      </DocumentTitle>
    )
   }
 }

HeadersPage.propTypes = {
  requestHeader: PropTypes.arrayOf(PropTypes.object),
  loadHeaders: PropTypes.func.isRequired,
};

HeadersPage.defaultProps = {
  requestHeaders: [],
};

const mapStateToProps = state => ({
  requestHeaders: state.headers.requestHeaders,
});

const mapDispatchToProps = dispatch => ({
  loadHeaders: () => {
    dispatch(loadHeaders());
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(HeadersPage);

I tried to change to use bootstrap-react-table and html table and it works
perfectly fine did I miss something in the code? please suggestions ... or code sample ...

Vavan
  • 21
  • 3
  • You are loading the data in ComponentDidMount(), so the first render is going to have no-data in it. The page should rerender when your data is added. That means you have a bug in your reducer. – sww314 Jul 11 '17 at 16:02
  • Add the redux dev tools and make sure your state showing a diff. https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en – sww314 Jul 11 '17 at 16:10
  • Here is my reduce function headerRequestSuccess(state, action) { return state.merge({ requestHeaders: action.requestHeaders, loading: false, error: false, }) }; in debug I see props get populated – Vavan Jul 11 '17 at 17:06
  • also checked state it gets changed – Vavan Jul 11 '17 at 17:12
  • I am wondering if you there is an issue with the app instance of redux and the Griddle version of Redux. Did you try to create a HoC Container that has all the redux code and makes the display component that calls the React only Griddle component? – sww314 Jul 16 '17 at 12:52

0 Answers0