react mapping component code example

Example 1: react map

{array.map((item)=>{
  return (
    <div key={item.id}>I am one Object in the Array {item}</div>
  )
})}

Example 2: map function in react

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

Example 3: 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 4: react map example leaflets

import React from 'react'import { Map as LeafletMap, TileLayer, Marker, Popup } from 'react-leaflet';class Map extends React.Component {  render() {    return (      <LeafletMap        center={[50, 10]}        zoom={6}        maxZoom={10}        attributionControl={true}        zoomControl={true}        doubleClickZoom={true}        scrollWheelZoom={true}        dragging={true}        animate={true}        easeLinearity={0.35}      >        <TileLayer          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'        />        <Marker position={[50, 10]}>          <Popup>            Popup for any custom information.          </Popup>        </Marker>      </LeafletMap>    );  }}export default Map

Example 5: react map

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