I have this React component (Dashboard) which renders multiple plots as child components. Whenever I update the state of the dashboard, multiple instances of the plots are created, which are stacked on top of each other.
Here is a simplified example:
state = {
goal : ''
}
_refresh = () => {
this.setState({
goal: '5'
})
}
render() {
return (
<div>
<div className='card'>
<div className='heading'>
<p style={{display: 'inline-block'}}>CURRENT WEIGHT</p>
{this.state.goal}
<button onClick={this._refresh}>hallo</button>
</div>
<CurrentPlot currentWeight={this.props.currentWeight} />
</div>
<div className='card'>
<div className='heading'>
<p>YOUR STATS</p>
</div>
<StatsPlot
xData={this.props.xData}
yData={this.props.yData}
/>
</div>
</div>
)
}
Any advice on how to fix this would be greatly appreciated!