xxxxxxxxxx
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 />;
}
};
xxxxxxxxxx
{array.map((item)=>{
return (
<div key={item.id}>I am one Object in the Array {item}</div>
)
})}
xxxxxxxxxx
function NameList() {
const names = ['Bruce', 'Clark', 'Diana']
return (
<div>
{names.map(name => <h2>{name}</h2>)}
</div>
)
}
xxxxxxxxxx
//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>
xxxxxxxxxx
const robots = ['Bruce', 'Clark', 'Diana']
robots.map((robot, index) => {
return (
<h1 key={index}>{robot} </h1>
)
})
xxxxxxxxxx
function ShowName() {
const userNames = ["Kunal", "Braj", "Sagar", "Akshay"];
return (
<>
<div>
{
userNames.map((elem) => {
<h1>{elem}</h1>
})
}
</div>
</>
);
}
export default ShowName;
xxxxxxxxxx
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} />)
});
xxxxxxxxxx
function App() {
return (
<div>
<h1>My Hacker Stories</h1>
<label htmlFor="search">Search: </label>
<input id="search" type="text" />
<hr />
<ul>
{list.map(function (item) {
return <li>{item.title}</li>;
})}
</ul>
</div>
);
}
xxxxxxxxxx
// REACT.JS
const arr = [{name: "test"}, {name: "test1"}, {name: "test2"}]
arr.map((n, i) => {
return <p key={i}>{ n.name }</p>
})
xxxxxxxxxx
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>
})
);
}