for in react code example

Example 1: react for loop in render

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    <ul>
      {elements.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

Example 2: 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 3: react for loop

<tbody>
  {[...Array(10)].map((x, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

Example 4: react for

render() {
  const elements = ['one', 'two', 'three'];

  const items = []

  for (const [index, value] of elements.entries()) {
    items.push(<li key={index}>{value}</li>)
  }

  return (
    <div>
      {items}
    </div>
  )
}

Example 5: 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>
    );
  }
}