array functions react code example

Example 1: map function in react

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

Example 2: react create array

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);console.log(doubled);

Example 3: react create list of array in react

const App = props => {  const quoteArray = props.quotes.map((quote) => {    return (      <Quote text={quote.text} author={quote.author} />    );  });  return (    <div>      <h2>Famous Quotes</h2>      {quoteArray}    </div>  );};App.propTypes = {  quotes: React.PropTypes.array}

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>
    );
  }
}