xxxxxxxxxx
function ShowName() {
const userNames = ["Kunal", "Braj", "Sagar", "Akshay"];
return (
<>
<div>
{
userNames.map((elem) => {
<h1>{elem}</h1>
})
}
</div>
</>
);
}
export default ShowName;
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
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
// JSX .map() method
// The array method map() comes up often in React. It’s good to get in the habit of using it alongside JSX.
// If you want to create a list of JSX elements from a given array, then map() over each element in the array, returning a list item for each one.
const strings = ['Home', 'Shop', 'About Me'];
const listItems = strings.map(string => <li>{string}</li>);
<ul>{listItems}</ul>
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>
})
);
}