React functional component TypeError: Cannot read property 'props' of undefined

Question

After hours reading how to bind this I give up. This is my first time with react, I have reviewed over 20 related questions on stackoverflow but I could not solve my problem.

I have installed react-multi-carousel component following the guidelines .

I have simply copied and pasted the Common Usage code and I am getting this annoying error:

TypeError: Cannot read property 'props' of undefined
Index
src/views/Index.js:107
  104 | responsive={responsive}
  105 | ssr={true} // means to render carousel on server-side.
  106 | infinite={true}
> 107 | autoPlay={this.props.deviceType !== "mobile" ? true : false}
      | ^  108 | autoPlaySpeed={1000}
  109 | keyBoardControl={true}
  110 | customTransition="all .5"

I tried to follow almost all the answers I found (mainly binding the this) without success.

Here is my code:

import React from "react";

// reactstrap components
import {
  Container
} from "reactstrap";


import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

// core components
import ScrollTransparentNavbar from "components/Navbars/ScrollTransparentNavbar.js";
import IndexHeader from "components/Headers/IndexHeader.js";




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.
  },
};


function Index() {


  React.useEffect(() => {
    document.body.classList.add("index-page");
    document.body.classList.add("sidebar-collapse");
    document.documentElement.classList.remove("nav-open");
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
    return function cleanup() {
      document.body.classList.remove("index-page");
      document.body.classList.remove("sidebar-collapse");
    };
  });
  return (
    <>
      <ScrollTransparentNavbar />
      <div className="wrapper">
          <IndexHeader />
          <Carousel
            swipeable={false}
            draggable={false}
            showDots={true}
            responsive={responsive}
            ssr={true} // means to render carousel on server-side.
            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>
        </div>
      </div>
    </>
  );
}

export default Index;

Answer 1

• You didn't define props
• there is no need for this in functional component

const Index = (props) => { ...
// or
function Index(props) {...

autoPlay={props.deviceType ...

Answer 2

In your function component you should add props like this

function Index(props) {
...
}

Answer 3

A function component does not get its props via this.props , it gets them as an object which is the first parameter of the function.

function Index (props) {
  // ...
  return (
    // ...
      autoPlay={props.deviceType !== mobile}
  )
}