ul in react code example
Example 1: 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>
);
};
Example 2: react create list of array in react
const App = props => { const quoteArray = props.quotes.map((quote) => { return ( <Quote text={quote.text} author={quote.author} /> ); }); return ( <div> <h2>Famous Quotes</h2> {quoteArray} </div> );};App.propTypes = { quotes: React.PropTypes.array}