Is Paused prop not working

[mohsinghafoor]

I'm working with react-insta-stories and passing the prop of isPaused but my stories keeps playing. Here is my component
import { Box, Flex, rem } from "@mantine/core";
import { Fragment, useState } from "react";
import Head from "next/head";
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
import ArticleCard from "@/components/common/article/Card";
import { Story } from "@/defs/Types";
import ReactInstaStories from "react-insta-stories";
import useBreakpoints from "@/components/common/CustomHooks/useBreakPoints";
import { FaAngleLeft, FaAngleRight, } from "react-icons/fa";
import { MdPause } from "react-icons/md";
import { TiTimes } from "react-icons/ti";
import { BiPlay } from "react-icons/bi";
import styled from "@emotion/styled";
import Link from "next/link";

export default function StoryBlog({
storyData,
}: InferGetServerSidePropsType) {

const { xs } = useBreakpoints()
const [currentSlide, setCurrentSlide] = useState(0);
const [isPaused, setIsPaused] = useState(false)

const handleNext = () => {
setCurrentSlide((prevSlide) => (prevSlide + 1) % storySlides.length);
};

const handlePrevious = () => {
setCurrentSlide((prevSlide) =>
prevSlide === 0 ? storySlides.length - 1 : prevSlide - 1
);
};
const storySlides = storyData.attributes.slides.map((slide : Slides) => ({
content: () => (

<ArticleCard w={xs ? '244px' : '350px'} story={slide.text} category="TOPICNAME" image={slide.image} height={xs ? rem(380) : rem(500)} />

),
}));

return (

<Flex justify={'center'} direction={'column'} align={'center'} w={'100%'} h={'100vh'} bg={'linear-gradient(0deg, rgba(11, 34, 64, 0.81) 0%, rgba(11, 34, 64, 0.81) 100%), linear-gradient(212deg, rgba(253, 37, 178, 0.70) 0%, rgba(72, 66, 193, 0.70) 100%)'}>
{storyData.attributes.slides.length > 0 &&
<Box pos={'relative'}>
<Cross href={'/blog/stories'}>


<Box pos={'absolute'} top={'-5%'} right={'6%'} onClick={() => setIsPaused(!isPaused)}>{isPaused ? : }
<Flex w='100%' justify={'space-between'} pos={'absolute'} top={'40%'}>

<FaAngleLeft size={xs ? 14 : 22} />


<FaAngleRight size={xs ? 14 : 22} />


<ReactInstaStories
stories={storySlides}
defaultInterval={5000}
width={xs ? 350 : 500}
height={xs ? 500 : 600}
currentIndex={currentSlide}
loop
isPaused={isPaused}
storyContainerStyles={{ background: 'transparent'}}
/>
}


);
}

const Cross = styled(Link)text-decoration: none; position: absolute; right: 0; top: -5%;

const BoxCross = styled(Link)text-decoration: none; position: absolute; right: 2%; top: 2%;

const Card = styled(Flex)outline: 0; box-sizing: border-box; border-radius: 0.5rem; box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.25rem 1.5625rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.625rem 0.625rem -0.3125rem; height: 700px; justify-content: center; align-items: center; background-size: cover; background-position: center; border-radius: 1.0625rem; cursor: pointer; width: 500px; @media (max-width: 786px) { width: 350px; height: 500px; }

const ButtonBox = styled(Flex)border-radius: 30px; border: 1.5px solid #E1E1E1; background: #FFF; box-shadow: 0px 9px 9px 3px rgba(0, 0, 0, 0.10); justify-content: center; align-items: center; height: 60px; width: 60px; cursor: pointer; z-index: 1000; @media (max-width: 600px) { height: 30px; width: 30px; }

[NagapavanTechWorm]

Hello,

I've been reviewing your code, and I noticed that you're using a ternary operator to conditionally render, but the code is incomplete, component based on the isPaused state:

{isPaused ? : }

[mohsinghafoor]

@NagapavanTechWorm isPause is a local boolean state like this const [isPause,setIsPause] = useState(false)
and i have a button on button click im reversing state like this onClick={() => setIsPaused(!isPause)}
and then passing this isPause to my ReactInstaStories like this
<ReactInstaStories
stories={storySlides}
defaultInterval={5000}
width={xs ? 350 : 500}
height={xs ? 500 : 600}
currentIndex={currentSlide}
loop
isPaused={isPaused}
storyContainerStyles={{ background: 'transparent'}}
/>

[Avinash1223]

isPaused not Working


`  const [isPaused, setIsPaused] = useState(false); I have taken a usestate and added a call back function

  const handlestoryplaypause = () => {
    setIsPaused(!isPaused);
  };
  
       < Button onClick={handlestoryplaypause} >click< /Button>      
              
              
                  <Stories
                    stories={getStoriesData(story)}
                    defaultInterval={5000}
                    onAllStoriesEnd={() => handleupdatetory([story])}
                    isPaused={isPaused}
                    onStoryEnd={() => {
                      story.items.forEach((item) => {
                        const isItemRead = item.is_read === true;
                        if (!isItemRead) {
                          handlestory(story?._id, item?._id);
                        }
                      });
                    }}
                    storyContainerStyles={{
                      zIndex: "10",
                    }}
                  />