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: () => (

),

}));

return (

{storyData.attributes.slides.length > 0 && setIsPaused(!isPaused)}>{isPaused ? : } }

); }

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",
                    }}
                  />