React Marquee module giving error

Question

I am getting an error in the Chrome Dev Tools Console when using the react-text-marquee module in react.

I am not sure how to resolve this issue without changing the output to a string instead of JSX.

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.

This is the chrome console error:

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

The complete Session.js 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 (
            <span style={{color: attr.color, backgroundColor: attr.background}}>{attr.text} </span>
        );
    }

    ConceptLogo(props) {
        if (props.display) {
            return (
                <div className="col-md-1">
                    <h2>{props.logo}</h2>
                </div>
            );
        }

        return null;
    }

    render() {
        return (
            <div className="row">
                <this.ConceptLogo logo={this.state.logo} display={this.state.showConceptLogo} />
                <div className="col-md-6">
                    <h2>{this.state.filmTitle}</h2>
                </div>
                <div className="col-md-1">
                    <h2>{this.state.classification}</h2>
                </div>
                <div className="col-md-3">
                    <Marquee hoverToStop={true} loop={true} leading={3000} trailing={3000} text={this.state.sessionAttributes.map(this.RenderAttributesElement)} />
                </div>
                <div className="col-md-1">
                    <h2>{this.state.screeningTime}</h2>
                </div>
            </div>
        );
    }
}

export default Session;

Answer 1

Both of following options basically just hide the warning.

Option 1: change type of the text prop in runtime:

import PropTypes from 'prop-types';

Marquee.propTypes.text = PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.array,
  ]);

However, this might pose a problem if the author of the library decides to make a change that will render your usage of their component incorrect.

Option 2: fork the repository, change propTypes field in source, and, after updating the version in package.json of the library, setup a link to it in your project's package.json:

"react-text-marquee": "git://github.com/yourusername/react-text-marquee"

After that you run npm install and now you have to maintain your copy of the library in case the author does bugfixes or something like that. You might even describe prop type better and make a pull request to the original repository.