how to access props.deviceType-CodePudding

My problem is kind of simple. I'm trying to access this.props.deviceType in order to use it in react-multi-carousel props, the problem is that I get a TypeError: Cannot read properties of undefined (reading 'props') and I don't know how to fix that.
Here is my code

import React, { useState } from "react";
import { Link } from "react-router-dom";
import PastEventCard from "./PastEventCard";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
function PastEventSection(props) {
  const responsive = {
  return (
      <Carousel
        autoPlay={this.props.deviceType !== "mobile" ? true : false}
        centerMode={this.props.deviceType !== "mobile" ? true : false}
        removeArrowOnDeviceType={["tablet", "mobile"]}
        deviceType={this.props.deviceType}
      >
        <PastEventCard title="" description="" imgURL="" />
        <PastEventCard title="" description="" imgURL="" />
        <PastEventCard title="" description="" imgURL="" />
      </Carousel>
  );
}
export default PastEventSection;

CodePudding user response：

try this:

import React, { useState } from "react";
import { Link } from "react-router-dom";
import Carousel from "react-multi-carousel";
import PastEventCard from "./PastEventCard";

import "react-multi-carousel/lib/styles.css";

function PastEventSection({ deviceType }) {
  const responsive = { // what is it?
  return (
      <Carousel
        autoPlay={deviceType !== "mobile"}
        centerMode={deviceType !== "mobile"}
        removeArrowOnDeviceType={["tablet", "mobile"]}
        deviceType={deviceType}
      >
        <PastEventCard title="" description="" imgURL="" />
        <PastEventCard title="" description="" imgURL="" />
        <PastEventCard title="" description="" imgURL="" />
      </Carousel>
  );
};

export default PastEventSection;

CodePudding user response：

Your component is a functional component. you don't access to props using this key you just access to it as any other function argument simply props.anything. that's why you don't have the this key and it's undefined. In Class based component we access props using this key because props is a property of the Component class