React.js events need 2 clicks to execute
The reason is that the state of a component does not change immediately.
In clear() method you set the width and height state. But internally when they react setSize() method they will not be updated immediately. They will be updated only when they reach the render method.
When you click the button the second time the states would have been updated properly. That is why it works in the second instance.
One solution please dont keep the width and height as state use it in props. Keep the 10 * 10 as a separete default prop and use it in the setSize method.