jsx for each code example

Example 1: jsx foreach

render() {
	const myArray = [];
    return <>
		{myArray.map(item => {
			return (<Element>
    			{item}
		    </Element>);
		});}
    </>
}

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

this.items = this.state.cart.map((item, key) =>    <li key={item.id}>{item.name}</li>);

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