title: React alert message is displaying twice
body: <p>I’m trying to display Alert message if API return false. I can do that but for some reason, in the UI I’m getting alert displayed 2x. Also in the dropdown change method, that API should be called and will return maybe has returned value true (If has returned true, the Alert should be hide).</p>
  
  <p>The Alert is called in the child component and the child is called in the parent:</p>
  
  <pre><code>//Parent
  
  import React from 'react'
  import Header from '../Header';
  
  const Parent = ()  =&gt; {
  .....
  render(
      &lt;Header /&gt;
    );
   }
   export default Parent;
  
   // Child
  
   import React from 'react'
   import Alert from '@alert-react'
   import Dropdown from '@dropdown-react'
  
  export default class Header extends React.Component {
  constructor(props) {
      super(props);
  
      this.state = {
          defaultMessage: []
      };
  this.getData = this.getData.bind(this);
  this.onDropdownChange = this.onDropdownChange.bind(this)
  }
  
  componentDidMount() {
      this.getData();
  }
  
  getData = () =&gt; {
      fetch("api")
      .then(response =&gt; {
          let test = !response.defaultApiMessage;
          this.setState({
              defaultMessage: test
          })
      })
  }
     onDropdownChange = (selectVal) =&gt; {
          this.getData();
      }
  
  render() {
      return(
          &lt;Dropdown 
          onChange={onDropdownChange()}
          /&gt;
          &lt;div&gt;
          { 
          this.state.defaultMessage &amp;&amp; (
          &lt;Alert message="test" /&gt;
          )
          }
          &lt;/div&gt;
      )
  }
  
  }
  </code></pre>
  
  <p>Result: Alert is called twice, one time in Header section and one time in Main section</p>