react map object code example

Example 1: how to map array of objects in react

[{
    name: 'Sam',
    email: '[email protected]'
 },
 {
    name: 'Ash',
    email: '[email protected]'
 }
].map( ( {name, email} ) => {
    return <p key={email}>{name} - {email}</p>
})

Example 2: map function in react

function NameList() {
	const names = ['Bruce', 'Clark', 'Diana']
    return (
    	<div>
      {names.map(name => <h2>{name}</h2>)}
      	</div>
    )
}

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