react if else rendering

import React, { Component, useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "../../css/components/Example.css";
import Card from "./Card";

export default class Example extends Component {
    constructor(props) {
        super(props);

        this.state = {
            active_campaign: [
                {
                    image: "http://mysadaqah.test/assets/img/header-bg.jpg",
                    title: "testing",
                    content: "try",
                    proggressWidth: "25%",
                    progress: 25
                },
                {
                    image: "http://mysadaqah.test/assets/img/header-bg.jpg",
                    title: "testing",
                    content: "try",
                    proggressWidth: "25%",
                    progress: 25
                },
                {
                    image: "http://mysadaqah.test/assets/img/header-bg.jpg",
                    title: "testing",
                    content: "try",
                    proggressWidth: "25%",
                    progress: 25
                },
                {
                    image: "http://mysadaqah.test/assets/img/header-bg.jpg",
                    title: "testing",
                    content: "try",
                    proggressWidth: "25%",
                    progress: 25
                }
            ]
        };
    }

    render() {
        return (
            <div className='container'>
                <div
                    className='row justify-content-center'
                    style={{ padding: "40px" }}>
                    <h2 style={{ textAlign: "center" }}> SENARAI KEMPEN </h2>
                </div>
                <div id='campaign_section'>
                    <div className='row'>
                        {this.state.active_campaign.map(item => {
                            return (
                                // want to span <div className='row> here if index % 2 !== 0
                                <div className='col-md-6 card-container'>
                                    <Card
                                        image={item.image}
                                        title={item.title}
                                        content={item.content}
                                        proggressWidth={item.proggressWidth}
                                        progress={item.progress}
                                    />
                                </div>
                                // want to span </div> here if index % 2 === 0
                            );
                        })}
                    </div>
                    <div
                        className='row justify-content-center'
                        style={{ paddingTop: "20px", marginBottom: "40px" }}>
                        <a className='btn btn-primary btn-xl text-uppercase'>
                            LIHAT SEMUA KEMPEN
                        </a>
                    </div>
                </div>
            </div>
        );
    }
}

if (document.getElementById("example")) {
    ReactDOM.render(<Example />, document.getElementById("example"));
}