Description
Summary
On the "Strict Mode" page, there are two sample code blocks in the "Fixing bugs found by double rendering in development" section which are supposed to change the background color on hover, but they don't actually change how anything is displayed. (Tested in Chrome, Opera, and Safari on Windows and Mac.)
Page
https://react.dev/reference/react/StrictMode#fixing-bugs-found-by-double-rendering-in-development
Details
On the "Strict Mode" page, there are two code blocks in the "Fixing bugs found by double rendering in development" section with this code:
<ul
onPointerEnter={() => setIsHover(true)}
onPointerLeave={() => setIsHover(false)}
style={{
backgroundColor: isHover ? '#ddd' : '#fff'
}}
>However, this code does nothing because the ul element's display styling means that changing the background-color styling doesn't change anything.
This could be fixed by adding a line like this:
<ul
onPointerEnter={() => setIsHover(true)}
onPointerLeave={() => setIsHover(false)}
style={{
display: 'table',
backgroundColor: isHover ? '#ddd' : '#fff'
}}
>However, that just looks bad.
Not sure what a better fix would be, but some fix is needed for that sample code.