如何在react中循环数据时向网格系统添加断点

我试图在react中为网格系统添加一个断点,同时遍历数据。但它并没有按我想要的方式行事。我想要三个 col-lg-3 ,然后添加断点 <div class="w-100"></div> 在继续相同的模式之前。

我想如果把断点 index === 3 ,但由于我不得不将它包装在另一个div中,因此导致了一些意想不到的结果。

const newVideoRow = category => {
  return category.map((video, index) => {
    if (index === 3) {
      return (
        <div>
          <div className="video col-sm-12 col-md-6 col-lg-3" key={video.title}>
            <Video
              key={video.title}
              videoTitle={video.title}
              videoLink={video.video}
              videoImage={video.image}
            />
          </div>
          <div className="w-100"/>
        </div>
      )
    }

  return (
    <div className="video col-sm-12 col-md-6 col-lg-3" key={video.title}>
      <Video
        key={video.title}
        videoTitle={video.title}
        videoLink={video.video}
        videoImage={video.image}
      />
    </div>
   )
  });
};

这是一张意外结果的照片。测试4应该在下一行。

降价显示 div 两者的包装 COL-LG-3 以及 <div class=“W-100”></div> . 这可能是问题的原因吗?如果是的话,我该怎么改?