title: Event target inherited by child doesn't effect parent React
body: <p>My question is basically how can I have a child style event affect the parent. Right now I'm using event target to change the style of a table cell I'm hovering over, but whenever I hover over a child with text in it the child changes but the parent does not which doesn't look very good. Here's my code.</p>
  <pre><code>hoverBackground = (e) =&gt; {
          if (e.target.classList.contains(this.state.calendarNavi) || e.target.classList.contains(this.state.calendarNaviEmpty)) {
              e.target.style.background = 'darkgrey'
          } else {
              e.target.style.background = &quot;#b1a18b&quot;
              e.target.style.color = &quot;white&quot;
          }
  
      }
  </code></pre>
  <p>I've looked for answers for a while but I couldn't find one most people are trying to prevent the child from effecting the parent, but I'm having the opposite problem. I want the child to change the style of the parent and vise versa.</p>
  <p>Here's the table data, I'm using Material Design Bootstrap for basic layouts:</p>
  <pre><code>&lt;td key={d} day={`${d}`} dayName={`${currentWeekDay}`} month={`${this.month()}`} onMouseEnter={this.hoverBackground} onMouseLeave={this.hoverBackgroundExit} className={`calendar-day ${currentDay} ${currentWeek} railway`} style={currentStyle}&gt;
                      &lt;MDBContainer&gt;
                          &lt;MDBRow&gt;
                              &lt;MDBCol&gt;
                                  {d}
                              &lt;/MDBCol&gt;
                          &lt;/MDBRow&gt;
                      &lt;/MDBContainer&gt;
                  &lt;/td&gt;
  </code></pre>
  <p>P.S. Sorry for the messy looking code, I still have to clean this component up a bit. Also I'm open to better ways of handling this hover event if anyone has suggestions.</p>