gregnb / gregnb/mui-datatables

Link Component Issue: History Object, React Router

Open
#322 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.7k
Forks
906
PR merge metrics
No merged PRs in 30d

Description

Update: It seems MUI Datable doesn't work well with React Router 4's history object, Link's and working with Redux's Store. Can you please look into? I had to change my Link tags to anchor tags...which defeats the idea of having a stable state with limited page refresh's

I am creating a React application that utilizes MUI-datatables. Although I love the functionality overall, I can't seem to debug an issue when I try to add a (react-router-dom component) to the data. From previous posts, people seem to successfully place other icons, etc. inline.

The initial render is fine and when pressing the link, I am successfully redirected. For example, clicking on row 1's link will take me to 'some/api/1' with a form to edit the information. However, when backing to the original URL or trying to redirect, the application crashes with

> Uncaught TypeError: Cannot read property 'toString' of undefined

Adding more context
> The above error occurred in the component:
in m (created by WithStyles(m))
in WithStyles(m) (created by PolicyList)
in PolicyList (created by Connect(PolicyList))
in Connect(PolicyList) (created by Route)
in Route (created by withRouter(Connect(PolicyList)))
in withRouter(Connect(PolicyList)) (created by Route)
in Route (created by App)
in Switch (created by App)
in main (created by Layout)
in div (created by Layout)
in Layout (created by WithStyles(Layout))
in WithStyles(Layout) (created by Route)
in Route (created by withRouter(WithStyles(Layout)))
in withRouter(WithStyles(Layout)) (created by App)
in div (created by App)
in Router (created by App)
in div (created by App)
in App
in Provider

## Expected Behavior

## Current Behavior

## Steps to Reproduce (for bugs)

1. I am using action creators to make API backend calls, this subsequently retrieves data into state and then passed as props to the component
2. renderPolicies() helper takes our props data and places it into array form. I am placing here
```
import React, { Fragment } from 'react';
import { connect } from 'react-redux';
import { Link, withRouter } from 'react-router-dom';
import { compose } from 'recompose';
import MUIDataTable from 'mui-datatables';

import Button from '@material-ui/core/Button';

import { fetchPolicies } from '../../actions';

class PolicyList extends React.Component {
state = {
page: 0,
count: 100,
data: []
};
// initial data onto the component
componentDidMount() {
this.props.fetchPolicies();
}

// render Helper to get data in array format
renderPolicies() {
return _.map(this.props.policies, policy => {
const policyLink = this.renderAdmin(policy);
return [
policy.resource.id,
policy.resource.action,
policy.resource.entity,
Edit
];
});
}

// Admin helper, may use for multiple Links later
renderAdmin = policy => {
return (

Edit
{' '}

Delete


);
};

// for pagination page changes and call to additional data
changePage = page => {
this.xhrRequest(`/myApiServer?page=${page}`).then(data => {
this.setState({
page: page,
data
});
});
};

renderCreate() {
return (



Create Policy


);
}

render() {
const columns = [
'ID',
'Action',
'Entity',
'Edit'
]
const data = this.renderPolicies();
const options = {
filterType: 'checkbox'
};

return (

);
}
}

// Note there is an object form in the state
// But, when you mapStateToPros we want to make an array
// Objec.values pulls the values out of object and makes an array
const mapStateToProps = state => {
return {
policies: Object.values(state.policies)
};
};

export default compose(
withRouter,
connect(
mapStateToProps,
{ fetchPolicies }
)
)(PolicyList);
```
## Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 3.7.0 |
| MUI-datatables | 2.0.0-beta-42 |
| React | 16.6.1 |
| browser | Chrome |
| etc | |

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.