Click event not updating in React/D3 when data is updated - reactjs

Question

I have a React component that renders a D3 bar chart where the bars are clickable. It works as expected until the parent state is updated. The bars update correctly but the click events on the bars are still bound to the previous data. I'm not sure if this is something I'm doing wrong in React or D3 or both. Any help is appreciated.
const DATA1 = [{"value":1}, {"value":1}]
const DATA2 = [{"value":3}, {"value":3}, {"value":3}, {"value":2}, {"value":2}]
const CLICK = 'chartClick'
function handleClick(data, i, els) {
const element = els[i]
const event = new Event(CLICK, {bubbles: true, detail: data})
return element.dispatchEvent(event)
}
class D3Chart {
constructor(selector) {
this.svg = d3.select(selector).append('svg')
}
draw(data) {
const xScale = d3.scaleLinear()
.domain([0, d3.max(data.map(i => i.value))])
.range([0, 500])
const barGroups = this.svg.selectAll('.barGroup').data(data)
const barGroupsEnter = barGroups.enter().append('g')
.attr('class', 'barGroup')
.attr('transform', (d, i) => {
const y = (i * 25)
return `translate(0, ${y})`
})
barGroupsEnter.append('rect')
.attr('class', 'bar')
.attr('height', 20)
.attr('width', d => xScale(d.value))
.on('click', handleClick)
barGroups.exit().remove()
}
}
class Chart extends React.Component {
chartRef = React.createRef()
componentDidMount() {
const {data, onClick} = this.props
this.chartRef.current.addEventListener(CLICK, onClick)
this.chart = new D3Chart(this.chartRef.current)
this.chart.draw(data)
}
shouldComponentUpdate(nextProps) {
const {data} = this.props
return !_.isEqual(data, nextProps.data)
}
componentDidUpdate() {
const {data} = this.props
this.chart.draw(data)
}
render() {
return <div ref={this.chartRef}></div>
}
}
class App extends React.Component {
state = {data: DATA1}
handleButtonClick = () => this.setState({data: DATA2})
handleChartClick = (data, event) => console.log('data length on click', data.length)
render() {
const {data} = this.state
console.log('data length on render', data.length)
return (
<React.Fragment>
<button onClick={this.handleButtonClick}>Update Data</button>
<Chart data={data} onClick={(event) => this.handleChartClick(data, event)} />
</React.Fragment>
)
}
}
ReactDOM.render(<App />, document.querySelector('.root'))
The output on the initial render/click is:
"data length on render" 2
"data length on click" 2
The output after the data has been updated is:
"data length on render" 5
"data length on click" 2
I'm expecting the latter to be:
"data length on render" 5
"data length on click" 5
Codepen example here: https://codepen.io/bohmanart/pen/QPQJdX

Answer 1

You can try the below solution, change the onclick event inside chart to this.chartRef.current.addEventListener(CLICK, ()=>onClick(this.props.data.length);), the change the onClick props on chart to onClick={this.handleChartClick} and then change the handle chart click to handleChartClick = (data) =>{ console.log('data length on click', data);}
I am not sure of the use case on why you want to the pass the data from Chart component via handleChartClick when it is already available in App class state. You can just use this.state.data.length in handleChartClick