I'm trying to install react-multi-carousel on my React app. I have some difficoulties with error like:

Line 1:34: Strings must use singlequote quotes Line 2:22:
Strings must use singlequote quotes Line 3:8: Strings must use singlequote quotes Line 36:53: Strings must use singlequote quotes Line 42:43: Strings must use singlequote quotes Line 42:53: Strings must use singlequote quotes

This is my code.

import React, { Component } from "react";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";


class GameList extends Component {

    render() {

        const responsive = {
            desktop: {
                breakpoint: { max: 3000, min: 1024 },
                items: 3,
                slidesToSlide: 3, // optional, default to 1.
            },
            tablet: {
                breakpoint: { max: 1024, min: 464 },
                items: 2,
                slidesToSlide: 2, // optional, default to 1.
            },
            mobile: {
                breakpoint: { max: 464, min: 0 },
                items: 1,
                slidesToSlide: 1, // optional, default to 1.
            },
        };

        return (
            <Carousel
                swipeable={false}
                draggable={false}
                showDots={true}
                responsive={responsive}
                ssr={true}
                infinite={true}
                autoPlay={this.props.deviceType !== "mobile" ? true : false}
                autoPlaySpeed={1000}
                keyBoardControl={true}
                customTransition="all .5"
                transitionDuration={500}
                containerClass="carousel-container"
                removeArrowOnDeviceType={["tablet", "mobile"]}
                deviceType={this.props.deviceType}
                dotListClass="custom-dot-list-style"
                itemClass="carousel-item-padding-40-px"
            >
                <div>Item 1</div>
                <div>Item 2</div>
                <div>Item 3</div>
                <div>Item 4</div>
            </Carousel>

        );
    }
}
export default GameList

I'm trying to install react-multi-carousel on my React app. I have some difficoulties with error like:

Line 1:34: Strings must use singlequote quotes Line 2:22:
Strings must use singlequote quotes Line 3:8: Strings must use singlequote quotes Line 36:53: Strings must use singlequote quotes Line 42:43: Strings must use singlequote quotes Line 42:53: Strings must use singlequote quotes

This is my code.

import React, { Component } from "react";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";


class GameList extends Component {

    render() {

        const responsive = {
            desktop: {
                breakpoint: { max: 3000, min: 1024 },
                items: 3,
                slidesToSlide: 3, // optional, default to 1.
            },
            tablet: {
                breakpoint: { max: 1024, min: 464 },
                items: 2,
                slidesToSlide: 2, // optional, default to 1.
            },
            mobile: {
                breakpoint: { max: 464, min: 0 },
                items: 1,
                slidesToSlide: 1, // optional, default to 1.
            },
        };

        return (
            <Carousel
                swipeable={false}
                draggable={false}
                showDots={true}
                responsive={responsive}
                ssr={true}
                infinite={true}
                autoPlay={this.props.deviceType !== "mobile" ? true : false}
                autoPlaySpeed={1000}
                keyBoardControl={true}
                customTransition="all .5"
                transitionDuration={500}
                containerClass="carousel-container"
                removeArrowOnDeviceType={["tablet", "mobile"]}
                deviceType={this.props.deviceType}
                dotListClass="custom-dot-list-style"
                itemClass="carousel-item-padding-40-px"
            >
                <div>Item 1</div>
                <div>Item 2</div>
                <div>Item 3</div>
                <div>Item 4</div>
            </Carousel>

        );
    }
}
export default GameList

• javascript
• reactjs

• This is eslint error. This isn't a react error – Avanthika Commented Jan 30, 2020 at 17:16
• So how to fix that? – gComet Commented Jan 30, 2020 at 17:17
• stackoverflow./questions/29312957/… – Avanthika Commented Jan 30, 2020 at 17:17
• it is very much clear from warning messages. use single quotes .e.g removeArrowOnDeviceType={['tablet', 'mobile']} – Zohaib Ijaz Commented Jan 30, 2020 at 17:17
• The right solution is reading a bit about eslint best practices and configuring your preference accordingly. – Avanthika Commented Jan 30, 2020 at 17:21

3 Answers 3

That's an es-lint warning. You can fix that in your es-lint config file ( .eslintrc).

"rules": {
    "quotes": [2, "single", { "avoidEscape": true }]
}

If you cant find .eslintrc files, then just workaround like this:

Get prettier at local:

npm install --save-dev --save-exact prettier
touch .prettierrc.json # create a .prettierrc.json file

add this line into .prettierrc.json file:

{
"singleQuote": true
}

under package.json, add below under "scripts"

"prettier": "prettier --write ./src"

now back to your Terminal and run

npm run prettier

and it should fix all the double quotes to single quotes.

This is eslint warning, not a react error. You need a .eslintrc on your root folder.

{
  "rules": {
    "quotes": [2, "double"]
  }
}

Note: This will throw error when you have strings within single quotes. Just right click in your editor and choose Eslint Fix, that should fix your trouble.