title: My React component does not update in the Safari browser
body: <p>Thought everything was going great. Works perfectly in Chrome, FF, Edge, even IE 11!</p>
  
  <p>The parent component holds all the sate. I pass the bets object to the child component which calculates a count to pass to the grandchild component to display. </p>
  
  <p>The parent state 'bets' is an object with the keys as an ID and the value as an object.</p>
  
  <p>The parent state is correctly changing when I interact with the app. Why will only Safari not update when the parent state changes? (on iOS and MacOS)</p>
  
  <p>Parent </p>
  
  <pre><code>class ParentComponent extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              bets: {}
          };
      }
  }
  </code></pre>
  
  <p>Child</p>
  
  <pre><code>getBadgeCount = (league) =&gt; {
      const bets = this.props.bets;
      let count = 0;
      Object.keys(bets).map((bet) =&gt; bets[bet].event.league === league &amp;&amp; count++);
      return count;
  };
  
  // ...
  
  &lt;ChildItem count={this.getBadgeCount(league)} /&gt;
  </code></pre>
  
  <p>GrandChild</p>
  
  <pre><code>class GrandChildComponent extends React.Component {
      render() {
          const { count } = this.props;
          return (
              &lt;div&gt;
                  &lt;div&gt;
                      {count &gt; 0 &amp;&amp; &lt;div&gt;{count}&lt;/div&gt;}
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>I <code>console.log</code> the count inside the grandchild render and in the componentDidUpdate and it shows the right number. Is there something apple/safari specific with react I am missing?</p>