CODEWITHSUNDEEP
reactjseslint
Dhia Shalabi
Dhia Shalabi

Reputation: 1540

How to solve ESLint is missing in props validation in React?

I am using React to do create a small Carousel using swiperJS and I have the following code:

import { Swiper } from "swiper/react";
import React from "react";

export default function SwiperContainer(props) {
    const { slides, navigation = true, clickable = true, dynamicBullets = true } = props;
    return (<Swiper dir="rtl" lazy={true} slidesPerView={1} spaceBetween={30} breakpoints={{
        // when window width is >= 320px
        320: {
            slidesPerView: 2, spaceBetween: 10
        }, // when window width is >= 640px
        640: {
            slidesPerView: 2, spaceBetween: 10
        }, // when window width is >= 768px
        768: {
            slidesPerView: 2, spaceBetween: 10
        }, // when window width is >= 1024px
        1024: {
            slidesPerView: 4, spaceBetween: 10
        },
    }} navigation={navigation} pagination={{
        "clickable": { clickable }, "dynamicBullets": { dynamicBullets }
    }} className="what-customer-say-swiper pt-1 pb-1" style={{ zIndex: 0, }}>
        {slides}
    </Swiper>);
}

And I am using ESLint with my project but it gives me this error.

Line 5:13:  'slides' is missing in props validation          react/prop-types
Line 5:21:  'navigation' is missing in props validation      react/prop-types
Line 5:40:  'clickable' is missing in props validation       react/prop-types
Line 5:58:  'dynamicBullets' is missing in props validation  react/prop-types

Upvotes: 0

Views: 5242

Answers (1)

Oro
Oro

Reputation: 2596

You should define PropTypes for your component

export default function SwiperContainer(props) {
    const { slides, navigation = true, clickable = true, dynamicBullets = true } = props;
    return (<Swiper dir="rtl" lazy={true} slidesPerView={1} spaceBetween={30} breakpoints={{
        // when window width is >= 320px
        320: {
            slidesPerView: 2, spaceBetween: 10
        }, // when window width is >= 640px
        640: {
            slidesPerView: 2, spaceBetween: 10
        }, // when window width is >= 768px
        768: {
            slidesPerView: 2, spaceBetween: 10
        }, // when window width is >= 1024px
        1024: {
            slidesPerView: 4, spaceBetween: 10
        },
    }} navigation={navigation} pagination={{
        "clickable": { clickable }, "dynamicBullets": { dynamicBullets }
    }} className="what-customer-say-swiper pt-1 pb-1" style={{ zIndex: 0, }}>
        {slides}
    </Swiper>);
}

SwiperContainer.propTypes = {
  slides: PropTypes.arrayOf(PropTypes.element),
  navigation: PropTypes.bool,
  clickable: PropTypes.bool,
  dynamicBullets: PropTypes.bool 
}

Upvotes: 2

Related Questions