[Bug]: Part of sample code on "Strict Mode" page doesn't work

[HiEv]

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.

[rickhanlonii]

Confirmed, I think the easy fix is:

<ul
  onPointerEnter={() => setIsHover(true)}
  onPointerLeave={() => setIsHover(false)}
  style={{
    display: 'flex',
    flexWrap: 'wrap',
    paddingTop: '10px',
    paddingBottom: '10px',
    backgroundColor: isHover ? '#ddd' : '#fff'
  }}
>

And remove the paddingBottom from the li elements.

But I would add those classes to the CSS file. Do you want to submit the PR?

[HiEv]

@rickhanlonii You did the work. If you think it looks good, go for it.

[rickhanlonii]

Done: #6705