Update Slide Content

If you want to change the content of the slide item, such as changing the display switching of a certain value, you can choose to play tricks on the key, or turn on the isSlideItemMemo mode, and use useMemo deps to determine whether to switch the item

Use Key Cache

Tip

This is a default cache mode, and it will decide whether to regenerate the slideItem based on all key values, because we don't want to regenerate the SlideItem when the slide index changes, but there is a need to update the SlideItem

const StateCarousel = () => {
    const [activeId, setActiveId] = React.useState(0);

    const myData = images.map(row => {
        const isActive = row.id === activeId;
        return {
            key: [row.id, isActive].join('-'),
            children: <BearSlideImage
                 imageUrl={row.image}
                 onClick={() => setActiveId(row.id)}
                 style={isActive ? {transition: 'filter .4s', filter: 'blur(4px)'}: undefined}
            />
        };
    });

    return <BearCarousel
        // ...ignore some
        data={myData}
    />
}

Use Memo Cache

If you don't want to mess with the id, you can use useMemo's deps

import {BearSlideCard} from 'bear-react-carousel';
const StateCarousel = () => {
    const [activeId, setActiveId] = React.useState(0);

    const myData = React.useMemo(() => images.map(row => {
        const isActive = row.id === activeId;
        return {
            key: row.id,
            children: <BearSlideImage
                 imageUrl={row.image}
                 onClick={() => setActiveId(row.id)}
                 style={isActive ? {transition: 'filter .4s', filter: 'blur(4px)'}: undefined}
            />
        };
    }), [activeId]);

    return <BearCarousel
        // ...ignore some
        data={myData}
        isSlideItemMemo
    />
}

Try click slideItem

important

If you don't want your sliding action to trigger the onclick event of the slideItem, please place the onClick on the BearSlideCard or BearSlideImage instead.