1const brandGroups = brandNames.map((e, i) => {
2 return i % chunkSize === 0 ? brandNames.slice(i, i + chunkSize) : null;
3 }).filter(e => { return e; });
4
5 const renderBrandsItems = () => {
6 const ThreePlusBrands = `${brandNames.slice(0, 3).join(", ")} + ${brandNames.length - 3} more`;
7 if (brandGroups.length <= 3) {
8 return brandGroups.map((item, i) => {
9 return (
10 <div key={i}>
11 <SelectionLabel>
12 {item}
13 <ClearIcon
14 className="fa fa-times"
15 data-name={item}
16 onClick={handleBrandClick}
17 />
18 </SelectionLabel>
19 </div>
20 );
21 });
22 }
23 return (
24 <SelectionLabel>
25 {ThreePlusBrands}
26 <ClearIcon className="fa fa-times" onClick={onClearBrands} />
27 </SelectionLabel>
28 );
29 };