title: React Marquee module giving error
body: <p>I am getting an error in the Chrome Dev Tools Console when using the <a href="https://www.npmjs.com/package/react-text-marquee" rel="nofollow noreferrer">react-text-marquee module</a> in react.</p>
  
  <p>I am not sure how to resolve this issue without changing the output to a string instead of JSX.</p>
  
  <p>I should clarify that the functionality of the page is actually working correct, however it would be nice to get rid of errors in case they cause issues down the line.</p>
  
  <p><strong>This is the chrome console error:</strong></p>
  
  <pre><code>09:43:29.747 index.js:2177 Warning: Failed prop type: Invalid prop `text` of type `array` supplied to `Marquee`, expected `string`.
      in Marquee (at Session.js:86)
      in Session (at Content.js:83)
      in div (at Content.js:88)
      in Content (at App.js:13)
      in div (at App.js:11)
      in App (at index.js:9)
  __stack_frame_overlay_proxy_console__ @ index.js:2177
  </code></pre>
  
  <p><strong>The complete Session.js code</strong></p>
  
  <pre><code>import React from 'react';
  import Marquee from 'react-text-marquee';
  import ReactDOMServer from 'react-dom/server';
  
  class Session extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              "showConceptLogo" : true,
              "logo" : "logo",
              "filmTitle": "2D Justice League",
              "classification": "PG",
              "sessionAttributes": [
                  {
                      "key": "VMAX",
                      "text": "VMAX",
                      "color": "yellow",
                      "background": "red"
                  },
                  {
                      "key": "Gold",
                      "text": "Gold"
                  },
                  {
                      "key": "Vjnr",
                      "text": "Vjnr"
                  },
                  {
                      "key": "VPrem",
                      "text": "VPrem"
                  },
                  {
                      "key": "FWTC",
                      "text": "FWTC"
                  },
                  {
                      "key": "CC",
                      "text": "CC"
                  }
              ],
              "screeningTime": "4:00PM"
          }
      }
  
      RenderAttributesElement(attr) {
          return (
              &lt;span style={{color: attr.color, backgroundColor: attr.background}}&gt;{attr.text} &lt;/span&gt;
          );
      }
  
      ConceptLogo(props) {
          if (props.display) {
              return (
                  &lt;div className="col-md-1"&gt;
                      &lt;h2&gt;{props.logo}&lt;/h2&gt;
                  &lt;/div&gt;
              );
          }
  
          return null;
      }
  
      render() {
          return (
              &lt;div className="row"&gt;
                  &lt;this.ConceptLogo logo={this.state.logo} display={this.state.showConceptLogo} /&gt;
                  &lt;div className="col-md-6"&gt;
                      &lt;h2&gt;{this.state.filmTitle}&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div className="col-md-1"&gt;
                      &lt;h2&gt;{this.state.classification}&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div className="col-md-3"&gt;
                      &lt;Marquee hoverToStop={true} loop={true} leading={3000} trailing={3000} text={this.state.sessionAttributes.map(this.RenderAttributesElement)} /&gt;
                  &lt;/div&gt;
                  &lt;div className="col-md-1"&gt;
                      &lt;h2&gt;{this.state.screeningTime}&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Session;
  </code></pre>