How to show a table on hovering a button in react?

Question

I tried

class MyColorPicker extends React.Component {
  render() {
      const darkColors = ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB'];
      const lightColors = ['#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB'];

    return (<div>
        <button id="color">Select color</button>
        <div className="picker">Text</div>
        <div className="picker">
        <table>
        <tbody>
        <tr>
            {darkColors.map(color => 
            <td style={{backgroundColor: color, width: 20, height: 20}} key={color}>{" "}</td>)}
        </tr>
        <tr>
            {lightColors.map(color => 
            <td style={{backgroundColor: color, width: 20, height: 20}} key={color}>{" "}</td>)}
        </tr>
        </tbody>
    </table>
    </div>
    </div>);
  }
}

css

.picker{
  display: none;
}

#color:hover + .picker{
  display: block !important;
}

The table does not show. I also tried adding a className to GithubPicker from react-color. Didn't work.

I don't want to set a state on hover because I have many components where I want to attach a button and a color picker. In this case, on hovering one button, all the other color pickers will show. I just want one color picker to show. How can I achieve this?

Answer 1

#color:hover + .picker work for element with class .picker just after #color:hover. In your case you have two .picker element. So first .picker will shown but as css second element will not show.

Please wrap both .picker div into a one div and put .picker class on wrapped div element.

Still you will get one more issue. As css you are trying to put hover css for button. When your mouse will move to picker, button hover will clear and again .picker will disappear.

So we have to wrap all element in one div and put hover css for wrapped div.

JSX

  <div>
    <div className="picker">
      <button id="color">Select color</button>
      <div className="picker-colors">
        <div>Text</div>
        <div>
          <table>
            <tbody>
              <tr>
                {darkColors.map(color => (
                  <td
                    style={{
                      backgroundColor: color,
                      width: 20,
                      height: 20
                    }}
                    key={color}
                  >
                    {" "}
                  </td>
                ))}
              </tr>
              <tr>
                {lightColors.map(color => (
                  <td
                    style={{
                      backgroundColor: color,
                      width: 20,
                      height: 20
                    }}
                    key={color}
                  >
                    {" "}
                  </td>
                ))}
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

CSS

.picker-colors {
  display: none;
}

.picker:hover .picker-colors {
  display: block;
}

Here's a working example https://codesandbox.io/s/9yrr9wx60r