Reusable react component with Canvas doesn't render canvas with its props - reactjs

Question

I am trying to create a reusable stateful component (it shouldn't be functional component). I need to add this component in runtime so in my App i have an array of the component (CanvasComponent) in my state to render the list of component. I also generate a random size to render the size of canvas. The problem occurs when I create second canvas, Weirdly it is only render once.
I have this problem in ChartJS and since my code base is very big I decided to simplify it by a sample.
However if you uncomment CanvasComponent in the Array it works perfectly fine.
import React from 'react';
import logo from './logo.svg';
import './App.css';
import CanvasComponent from './CanvasComponent';
class App extends React.Component {
state = {
canvasList: [
// <CanvasComponent size={30}></CanvasComponent>,
// <CanvasComponent size={50}></CanvasComponent>
]
}
handleClick = () => {
const size = Math.floor(Math.random() * (100 - 50 + 1) + 50);
const newCanvas = <CanvasComponent size={size}></CanvasComponent>
this.setState({
canvasList: [newCanvas,
...this.state.canvasList]
})
}
render() {
return (
<div className="App">
<button onClick={this.handleClick}>Add canvas</button>
{ this.state.canvasList.map((item, i) => {
return <CanvasComponent {...item.props} key={i}></CanvasComponent>
})}
</div>
);
}
}
export default App;
And the component
import React from 'react'
class CanvasComponent extends React.Component {
constructor(props) {
super(props);
this.myCanvas = React.createRef();
}
componentDidMount() {
const ctx = this.myCanvas.current.getContext('2d');
ctx.fillRect(0, 0, 100, 100);
}
render() {
console.log(this.props);
return (
<div>
<p>Size should be {this.props.size}</p>
<canvas ref={this.myCanvas} width={this.props.size} height={this.props.size} />
</div>
)
}
}
export default CanvasComponent

Answer 1

I believe that your issue here is that you're rendering the canvas components programmatically. If something was not present when the page first loaded, then event listeners are not actively looking for it.
I'm sure there's a more elegant solution than mine, but I tend to get around this issue by writing something like.
state={ updated: false}
componentDidMount(){
this.setState({updated:true})
}
Updating the state forces a rerender, and the event listeners will know to pay attention to the relevant component.

Answer 2

The issue was here, I will share here in case someone have had same issue, can find it.
Instead of
this.setState({
canvasList: [newCanvas,
...this.state.canvasList]
})
You should write
this.setState({
canvasList: [...this.state.canvasList,
newCanvas]
})
I still don't know why, but it fixed the problem.