map react html code example
Example 1: map function in react
function NameList() {
const names = ['Bruce', 'Clark', 'Diana']
return (
<div>
{names.map(name => <h2>{name}</h2>)}
</div>
)
}
Example 2: react create pillbox for each chunk of array
const brandGroups = brandNames.map((e, i) => {
return i % chunkSize === 0 ? brandNames.slice(i, i + chunkSize) : null;
}).filter(e => { return e; });
const renderBrandsItems = () => {
const ThreePlusBrands = `${brandNames.slice(0, 3).join(", ")} + ${brandNames.length - 3} more`;
if (brandGroups.length <= 3) {
return brandGroups.map((item, i) => {
return (
<div key={i}>
<SelectionLabel>
{item}
<ClearIcon
className="fa fa-times"
data-name={item}
onClick={handleBrandClick}
/>
</SelectionLabel>
</div>
);
});
}
return (
<SelectionLabel>
{ThreePlusBrands}
<ClearIcon className="fa fa-times" onClick={onClearBrands} />
</SelectionLabel>
);
};