title: Encountered error "Invariant Violation: Objects are not valid asa React child
body: <p>Hi new be in Ractjs here, i want to render a <code>carousel</code> in home page of my existing application,
  my <strong><em>index.js</em></strong> file contains</p>
  
  <pre><code>import React from 'react'
  import HeaderContainer from 'containers/HeaderContainer'
  import Footer from 'components/Footer'
  import Flashes from 'containers/Flashes'
  import Carousel from 'components/Carousel' #i have added for carousel functionality
  export default (props) =&gt; {
   return (
     &lt;div&gt;
      &lt;HeaderContainer /&gt;
      &lt;Flashes fixed={true}/&gt;
      &lt;main id="page"&gt;
        &lt;div className="container-fluid"&gt;
          {props.children}
        &lt;/div&gt;
      &lt;/main&gt;
         &lt;Carousel /&gt; #this is too i added
          &lt;Footer /&gt;        
     &lt;/div&gt;
   )
  }
  </code></pre>
  
  <p>my carousel.js in component folder is like </p>
  
  <pre><code>'use strict';
  
    var React = require('react');
  
    var Carousel = require('nuka-carousel');
  
    const App1 = React.createClass({
    mixins: [Carousel.ControllerMixin],
   render() {
     return (
      &lt;Carousel&gt;
         &lt;img src="https://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide1"/&gt;
        &lt;img src="https://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide2"/&gt;
       &lt;img src="https://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide3"/&gt;
       &lt;img src="https://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide4"/&gt;
        &lt;img src="https://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide5"/&gt;
        &lt;img src="https://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide6"/&gt;
      &lt;/Carousel&gt;
      )
    }
  });
  module.exports = App1;
  </code></pre>
  
  <p>How ever when i use above code in newly created app it works, please help me,</p>
  
  <p>i have also tried with ES6 and remove mixins but still error persist  </p>
  
  <pre><code>'use strict';
  
  var React = require('react');
  
  var Carousel = require('nuka-carousel');
  
  class App1 extends React.Component {
  
   // mixins: [Carousel.ControllerMixin],
  render() {
    return (
    &lt;Carousel&gt;
      &lt;img 
  src="http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide1"/&gt;
      &lt;img 
  src="http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide2"/&gt;
      &lt;img 
  src="http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide3"/&gt;
      &lt;img 
  src="http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide4"/&gt;
      &lt;img 
  src="http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide5"/&gt;
      &lt;img 
  src="http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide6"/&gt;
        &lt;/Carousel&gt;
      )
    }
  }
  module.exports = App1;
  </code></pre>