title: Change background color of parent component from child component based on child state
body: <p>I have a spinner in a component that is in a div of a parent layout container. In my child container, I have a victory chart draw when the data loads. I have the spinner run until the ajax gets the data and sets the state. I want to change the background color of the parent component div based upon the state so that the spinner is on a different color background than the chart.</p>
  
  <p>In my chart component it works like this:</p>
  
  <pre><code>if(this.state.data){
          return (
              &lt;div className="chart"&gt;
                ...
              &lt;/div&gt;
            }else {
              return &lt;div class="spinner&gt;&lt;/div&gt;
            }
  </code></pre>
  
  <p>That all works fine, but what I also want to do is set the background color of the parent div using something like:</p>
  
  <pre><code>if(this.state.data) {
    this.props.setParentBackgroundColor("#fff")
  </code></pre>
  
  <p>}</p>
  
  <p>Even if I create a prop and pass in a function, it doesn't seem to set the background color of the parent. Is there a way to do that based on the component rather than through an onclick or some user event?</p>
  
  <p>Here is another version of a child component switching slides, at the forth slide I want to change the parent background:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { AdminLoginsChart } from './admin-logins-chart';
  
  export class Slides extends Component {
  render(){
  if(this.props.slideNum === 0) {
      return (
          //&lt;div&gt;Slide 0&lt;/div&gt;
          &lt;AdminLoginsChart /&gt;
      );
  } else if (this.props.slideNum === 1) {
      return &lt;div&gt;Slide 1&lt;/div&gt;;
  } else if (this.props.slideNum === 2) {
      return &lt;div&gt;Slide 2&lt;/div&gt;
  } else {
      this.props.ChangeParentStyle("fff"); // change the parent here
      return &lt;div&gt;Out of slides&lt;/div&gt;;
  }
  };
  }
  
  // Parent Component has this:
  
  class App extends Component {
  constructor() {
      super();
      this.state = {
          interval: 8000,
          slideNum: 0,
          backgroundColor: '#ccc'
      };
  }
  
  ChangeParentStyle = (backgroundColor)=&gt; {
      this.setState({
          backgroundColor: backgroundColor
      })
  }
  
  slide = () =&gt; {
  
          //increase by num 1, reset to 0 at 4
          if (this.state.slideNum === 0) {
              //slide 0;
              console.log("slide 0");
          } else if (this.state.slideNum === 1) {
              //slide 1;
              console.log("slide 1");
              this.setState({slideNum: 1})
  
          } else if (this.state.slideNum === 2) {
              //slide 2;
              console.log("slide 2");
              this.setState({slideNum: 2})
          }
          this.setState({slideNum :(this.state.slideNum + 1) % 4});
  
          //return this.state.slideNum;
      }
  
  
  stopTimer = () =&gt; {
      clearInterval(this.intervalrefreshId);
  }
  
  componentDidMount() {
      this.intervalrefreshId = window.setInterval(this.slide, this.state.interval);
  }
  render() {
  return (
    &lt;div className="App"&gt;
      &lt;div className="App-header"&gt;
        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
      &lt;/div&gt;
        &lt;Chart style={{backgroundColor: this.state.backgroundColor}} &gt;
              &lt;Slides slideNum={this.state.slideNum} ChangeParentStyle={this.ChangeParentStyle.bind(this)}/&gt;
            {/*&lt;AdminLoginsChart data={this.state.data}/&gt;*/}
  
        &lt;/Chart &gt;
  
  
    &lt;/div&gt;
  );
  </code></pre>