xxxxxxxxxx
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;
xxxxxxxxxx
{array.map((item)=>{
return (
<div key={item.id}>I am one Object in the Array {item}</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
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
// 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>
})
);
}
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
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
xxxxxxxxxx
export const Articles = props => {
const [articles, setArticle] = React.useState(props.data || [])
React.useEffect(() => {
if (Array.isArray(articles) && articles.length < 1) {
setArticle([
{
title: 'how to map array in react',
content: `read this code!`,
},
])
}
}, [articles])
return (
<div>
{Array.isArray(articles) &&
articles.map((item, key) => (
<article key={key}>
<h2>{item.title}</h2>
<p>{item.content}</p>
</article>
))}
</div>
)
}