I have these React classes
class App extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
const { dispatch } = this.props;
var props = this.props;
dispatch(fetchDistricts('California'));
}
render() {
return (
height={this.props.height}>
width={this.props.width}
height={this.props.height}>
);
}
};
Chart looks like this
export default class Chart extends React.Component {
render() {
return (
height={this.props.height}>
);
}
};
And Bars looks like this
export default class Bar extends React.Component {
shouldComponentUpdate(nextProps) {
debugger
return this.props.data !== nextProps.data;
}
render() {
debugger
let props = this.props;
let data = props.data.map((d) =>
{
return d.y;
}
);
let yScale = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, this.props.height]);
let xScale = d3.scale.ordinal()
.domain(d3.range(this.props.data.length))
.rangeRoundBands([0, this.props.width], 0.05);
let bars = data.map((point, i) => {
var height = yScale(point),
y = props.height - height,
width = xScale.rangeBand(),
x = xScale(i);
return (
width={width}
x={x}
y={y}
key={i}>
);
});
return (
{bars}
);
}
};
the debuggers in Bars aren't called - the render method is not called.
Why?