How to make lightslider jquery plugin work in a reactjs component?

Question

This is my code on rendering the lightslider gallery. My problem is that the jquery gallery does not display correctly. It only renders the photos but without the styles. I have read about componentDidMount mounting before render begins. The markup on the vertical list is the way on how to use the lightslider gallery.

What do you seem is the problem? How can we use a jquery plugin and then render it via reactjs component?

render(){
    const photodata = this.props.gallery;
    const datax = photodata.data;

    return(
        <div>
            {datax.map(function(object,i){
                let standardprops = object.properties;
                let photos = standardprops.Photos;

                {
                    return(
                        object.properties.Photos.map(function(fields){
                            let photo = fields.photos;
                            let thumb = fields.thumbnail;

                            return (
                                <ul id="vertical">
                                    <li key={fields.i} data-thumb={thumb} data-src={photo}>
                                        <img src={photo} className="img-responsive" />
                                    </li>
                                </ul>
                            )
                        })
                    )
                }

            })}    
        </div>
    )
}

Answer 1

After reading docs about componentDidMount, I have come up with this solution. I also got it from the egghead site which is this: https://egghead.io/lessons/react-using-react-with-the-fullcalendar-jquery-plugin

componentDidMount(){

    const {vertical} = this.refs;  

    $(vertical).lightSlider({
        gallery:true,
        item:1,
        slideMargin:0,
        speed:500,
        auto:false,
        loop:true,
        adaptiveHeight:true,
        vertical:true,
        verticalHeight:600,
        vThumbWidth:220,
        thumbItem:4,
        thumbMargin:5,
        onSliderLoad: function(el) {
            el.lightGallery({
                selector: '.vertical .lslide'
            });
        },
        responsive : [
            {
                breakpoint:1025,
                settings: {
                    item:1,
                    slideMove:1,
                    gallery:true,
                    thumbItem:8,
                    vThumbWidth:120
                }
            },
            {
                breakpoint:769,
                settings: {
                    item:1,
                    slideMove:1,
                    gallery:true,
                    thumbItem:8,
                    vThumbWidth:100,
                    verticalHeight:450
                }
            },
            {
                breakpoint:737,
                settings: {
                    item:1,
                    slideMove:1,
                    gallery:false,
                    thumbItem:0,
                  }
            },
            {
                breakpoint:668,
                settings: {
                    item:1,
                    slideMove:1,
                    gallery:false,
                    thumbItem:0,
                  }
            },
            {
                breakpoint:641,
                settings: {
                    item:1,
                    slideMove:1,
                    gallery:false,
                    thumbItem:0,
                  }
            },
            {
                breakpoint:480,
                settings: {
                    item:1,
                    slideMove:1,
                    gallery:false,
                    thumbItem:0,
                }
            }
        ]   
    });
}

The render is also now different. Instead of putting the ul inside the map. I put it outside with the refs to vertical

render(){
const photodata = this.props.gallery;
const datax = photodata.data;

return(
    <div>
        <ul ref="vertical">
        {datax.map(function(object,i){
            let standardprops = object.properties;
            let photos = standardprops.Photos;

            {
                return(
                    object.properties.Photos.map(function(fields){
                        let photo = fields.photos;
                        let thumb = fields.thumbnail;

                        return (

                                <li key={fields.i} data-thumb={thumb} data-src={photo}>
                                    <img src={photo} className="img-responsive" />
                                </li>

                        )
                    })
                )
            }

        })}
        </ul>   
    </div>
)}