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>
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 todoItems = [
{
id: 1,
text:"todo 1"
},
{
id: 2,
text:"todo 3"
},
{
id: 3,
text:"todo 3"
}
];
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
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} />)
});
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>
)
}
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);