const array={{firstName:"x", lastName:"y"},{firstName:"a", lastName:"b"}}

​

// Method 1: Without using "{}"

array.map((item)=>(

  <ComponentName fName={item.firstName} lName={item.lastName} />

));

​

// Method 2: With using "{}"

array.map((item)=>{

  return(<ComponentName fName={item.firstName} lName={item.lastName} />)

});

{array.map((item)=>{

  return (

    <div key={item.id}>I am one Object in the Array {item}</div>

  )

})}

function NameList() {

    const names = ['Bruce', 'Clark', 'Diana']

    return (

        <div>

      {names.map(name => <h2>{name}</h2>)}

        </div>

    )

}

//lets say we have an array of objects called data

<div className="sample">

  {data.map((item)=>{

    return(

  <div key={item.id} className="objectname">

    <p>{item.property1}</p>

    <p>{item.property2}</p>

  </div>

    );

  });

</div>

const robots = ['Bruce', 'Clark', 'Diana']

​

robots.map((robot, index) => {

                    return (

                        <h1 key={index}>{robot} </h1>

                    )

})

function ShowName() {

  const userNames = ["Kunal", "Braj", "Sagar", "Akshay"];

  return (

    <>

      <div>

            { 

              userNames.map((elem) => {

              <h1>{elem}</h1>

              })

            }

          </div> 

    </>

  );

}

​

export default ShowName;

// REACT.JS

​

const arr = [{name: "test"}, {name: "test1"}, {name: "test2"}]

​

arr.map((n, i) => {

    return <p key={i}>{ n.name }</p>

})

render() {

    return (

        // using a arrow function get the looping item and it's index (i)

        this.state.data.map((item, i) => {

          <li key={i}>Test</li>

        })

    );

}

​

    const mapItems = (loading, data = [], Component, ...attributes) => {

        try {

            if (loading) {

                return <LoaderForApi />;

            }

​

            if (Array.isArray(data) && data.length > 0) {

                return data.map((item, i) => (

                    <Component key={i} {...item} {...attributes} currentIndex={i} />

                ));

            }

​

            return <NoRecord />;

        } catch (error) {

            return <NoRecord />;

        }

    };

import React from 'react';   

import ReactDOM from 'react-dom';   

function NameList(props) {  

  const myLists = props.myLists;  

  const listItems = myLists.map((myList) =>  

    <li>{myList}</li>  

  );  

  return (  

    <div>  

          <h2>React Map Example</h2>  

              <ul>{listItems}</ul>  

    </div>  

  );  

}  

const myLists = ['A', 'B', 'C', 'D', 'D'];   

ReactDOM.render(  

  <NameList myLists={myLists} />,  

  document.getElementById('app')  

);  

export default App;