Description
Is this a bug report?
Yes
Did you try recovering your dependencies?
Not relevant.
Which terms did you search for in User Guide?
Logo, rotating, overlapping
Environment
Environment Info:
System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz
Binaries:
npm: 6.6.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 42.17134.1.0
Internet Explorer: 11.0.17134.1
npmPackages:
react: ^16.7.0 => 16.7.0
react-dom: ^16.7.0 => 16.7.0
react-scripts: 2.1.3 => 2.1.3
npmGlobalPackages:
create-react-app: Not Found
This is a lie, I don't actually use IE or Edge. I am ashamed to admit I use Windows at home though.
Steps to Reproduce
- Create a new react app using create-react-app
npx create-react-app react-bug
cd react-bug
npm start - Add a button just below the logo component, add a little event to the button click, may I propose a counter?
<button onClick={() => this.setState({counter: this.state.counter + 1})}>OMG Don't click me {this.state.counter} times </button>
And initialize some state:
state = { counter : 0 }
3. Click the button, notice it doesn't always work.
4. Inspect the logo, and notice the invisible part of it rotating over your button.
5. Realize you were clicking the rotating logo
Expected Behavior
I suspect the easiest solution is to give the logo SVG image more convenient dimensions. Maybe an actual square?
Actual Behavior
Reproducible Demo
I was too ashamed to push this to a public repo. I read a bit too many articles about setState grouping and render cycles before realizing the logo overlap was the culprit.
I know this is a silly bug report. We stumbled on this while introducing it to our teams, in a more complex example than I described here. Because some of us had used a bigger text component between the logo and the button counter, some of us didn't have the issue, which added to the confusion.