table: Table does not re-render when using redux for pageSize
// myTable.js
class MyTable extends React.Component {
render() {
return (
<div>
<h1>{this.props.pageSize}</h1>
<ReactTable
data={this.props.data} // not from redux
columns={this.props.columns} // not from redux
pageSize={this.props.pageSize} // from redux
/>
</div>
);
}
}
const mapStateToProps = state => ({ pageSize: state.pageSize });
export default connect(mapStateToProps, null)(MyTable);
// customTable.js
class CustomTable extends React.Component {
componentWillMount() {
this.props.loadData();
}
render() {
const columns = [...];
return (
<MyTable data={this.props.data} columns={columns} />
);
}
}
const mapStateToProps = state => ({ data: state.something });
const mapDispatchToProps = dispatch => ({ loadData: () => { dispatch(loadSomething()); } });
export default connect(mapStateToProps, mapDispatchToProps)(CustomTable);
Note that the value inside <h1> changes, but the table does not re-render. If I map the pageSize in CustomTable and send it down as a normal prop, it works. The problem occurs when I have a container inside a container.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 15 (7 by maintainers)
Had the same issue. solved it by adding a key to the child component to force rendering:
<ReactTable key={this.props.uniqueKey} ...in you sandbox example adjust it as follows:
<ReactTable key={this.props.pageSize} ...