How do you optimize this code in a react project? - Codes Helper

How do you optimize this code in a react project?
renderFooter2 (quantity) {
        const _self = this;

        console.log("showPageNumber = ", _self.state.showPageNumber)

        let wordStyle = {
            color: "rgba(71,129,255,1)"
        }

        let numberFrameCommon = {
            width: 38,
            height: 38,
            marginLeft: 10,
            cursor:"pointer"
        }

        let numberFrame = {
            ...numberFrameCommon,
            background: "rgba(71, 129, 255, 1)",
            color: "rgba(255, 255, 255, 1)",
        }

        let numberFrame2 = {
            ...numberFrameCommon,
            background: "rgba(27, 29, 45, 1)",
            color:"rgba(99, 107, 138, 1)"
        }

        let ellipsisStyle = {
            ...numberFrameCommon,
            background: "rgba(27, 29, 45, 1)",
            color:"rgba(99, 107, 138, 1)"
        }

        let data = [];

        for(let di=1; di<=_self.state.showPageNumber; diPP) {
            data[di-1] = di;
        }

        return (

            data.map((item, index, arr) => {

                //console.log("item = ", item);
                //console.log("index = ", index);
                if(index === 0) {
                    return (<div
                        key = {index}
                        style = {
                            _self.state.currentClickPage === index?
                                numberFrame : numberFrame2
                        }
                        className={"numberFrame"}
                        onClick={() => this.showPageData(index)}
                    >
                        {index+1}
                    </div>)
                } else if( index === 1 ) {
                    return (<div
                        key = {index}
                        style = {ellipsisStyle}
                        className={"numberFrame"}
                    >
                        ...
                    </div>)
                } else if( index<_self.state.currentClickPage &&
                    _self.state.currentClickPage-index<4 ) {
                    return (<div
                        key = {index}
                        style = {
                            _self.state.currentClickPage === index?
                                numberFrame : numberFrame2
                        }
                        className={"numberFrame"}
                        onClick={() => this.showPageData(index)}
                    >
                        {index+1}
                    </div>)
                } else if ( index === _self.state.currentClickPage ) {
                    return (<div
                        key = {index}
                        style = {
                            _self.state.currentClickPage === index?
                            numberFrame : numberFrame2
                        }
                        className={"numberFrame"}
                        onClick={() => this.showPageData(index)}
                    >
                        {index+1}
                    </div>)
                } else if (index>_self.state.currentClickPage &&
                    index-_self.state.currentClickPage<5 ) {
                    return (<div
                        key = {index}
                        style = {
                            _self.state.currentClickPage === index?
                                numberFrame : numberFrame2
                        }
                        className={"numberFrame"}
                        onClick={() => this.showPageData(index)}
                    >
                        {index+1}
                    </div>)
                } else if (index-_self.state.currentClickPage === 5) {
                    return (<div
                        key = {index}
                        style = {ellipsisStyle}
                        className={"numberFrame"}
                    >
                        ...
                    </div>)
                } else if (index === _self.state.showPageNumber-1) {
                    return (<div
                        key = {index}
                        style = {
                            numberFrame2
                        }
                        className={"numberFrame"}
                        onClick={() => this.showPageData(index)}
                    >
                        { _self.state.showPageNumber}
                    </div>)
                }
            })
        )

    }