react 4loop code example

Example 1: react create pillbox for each chunk of array

const brandGroups = brandNames.map((e, i) => {
      return i % chunkSize === 0 ? brandNames.slice(i, i + chunkSize) : null;
    }).filter(e => { return e; });

    const renderBrandsItems = () => {
      const ThreePlusBrands = `${brandNames.slice(0, 3).join(", ")} + ${brandNames.length - 3} more`;
      if (brandGroups.length <= 3) {
        return brandGroups.map((item, i) => {
          return (
            <div key={i}>
              <SelectionLabel>
                {item}
                <ClearIcon
                  className="fa fa-times"
                  data-name={item}
                  onClick={handleBrandClick}
                />
              </SelectionLabel>
            </div>
          );
        });
      }
      return (
        <SelectionLabel>
          {ThreePlusBrands}
          <ClearIcon className="fa fa-times" onClick={onClearBrands} />
        </SelectionLabel>
      );
    };

Example 2: change items loop react

import React from 'react';
import './HomePage.scss'
import { Col,Row, Button, Container } from "reactstrap";
let image1 = require("../../Assets/image1.jpg");
let image2 = require("../../Assets/image2.jpg");
let image3 = require("../../Assets/image3.png");
let image4 = require("../../Assets/image4.jpg");
export default class HomePage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            imagesItems: [image1,image2,image3,image4],
            imgChange:image1,
            imageIndex:0
    componentDidMount=() => {
        let totallSize= this.state.imagesItems.length-1;
        
        setInterval(() => {
            if(this.state.imageIndex === totallSize){
                this.setState({imageIndex: 0})
            }else{
                this.setState({imageIndex: this.state.imageIndex + 1})
            }
          },  3000);
    }
    render() {
        return (
            <Container >
<div className={"imageDiv"} >
    <img  src={this.state.imagesItems[this.state.imageIndex]} className="imgClass" />
</div>
      </Container>
    );
  }
}