React-Elastic-Carousel Custom Arrow

user_17148120 0
Viewed 1021

I wanted to get help for adding custom arrows to my react carousel, but I am getting the error for 'type' is not defined no-undef.
Can someone please tell me what I am doing wrong? and preferably a solution for the current situation.

Thank you

import Carousel, { consts } from 'react-elastic-carousel';
import LeftArrow from './Assets/Group 1316.svg'
import RightArrow from './Assets/Group 1317.svg'

export default function BootcampNew (props) {

const breakPoints = [
        { width: 1, itemsToShow: 1 },
        { width: 550, itemsToShow: 2 },
        { width: 768, itemsToShow: 3 },
        { width: 900, itemsToShow: 4 },
      ];
type === consts.PREV;

    const myArrow = ({type,onClick, isEdge}) => {
        const pointer = type === consts.PREV ? {LeftArrow} : {RightArrow}
        return(
            <Button onClick={onClick} disabled={isEdge}>{pointer}</Button>
        )
      }

<Carousel
     renderArrow={myArrow}
     breakPoints={breakPoints}
     pagination={false}>
     <CourseCard/>
<Carousel/>
react-elastic-carousel carousel reactjs
2 Answers

you can't type type === consts.PREV; without any definition and the only use of it, in this case, is to be inside a condition, the other thing you don't return what's being rendered by the functional component, the below code should solve the problems.

import Carousel, { consts } from 'react-elastic-carousel';
import LeftArrow from './Assets/Group 1316.svg'
import RightArrow from './Assets/Group 1317.svg'

function myArrow({ type, onClick, isEdge }) {
    const pointer = type === consts.PREV ? {LeftArrow} : {RightArrow}
    return (
      <button onClick={onClick} disabled={isEdge}>
        {pointer}
      </button>
    )
  }

export default function BootcampNew (props) {


const breakPoints = [
        { width: 1, itemsToShow: 1 },
        { width: 550, itemsToShow: 2 },
        { width: 768, itemsToShow: 3 },
        { width: 900, itemsToShow: 4 },
      ];
      
      return (
        <Carousel renderArrow={myArrow} breakPoints={breakPoints} pagination={false}>
            <CourseCard/>
        </Carousel>
      );

}
user_79604320

const pointer = type === consts.PREV ? : <img src={leftArrow} />:<img src={rightArrow} />

user_86011280
Related