Answer the question
In order to leave comments, you need to log in
How to optimize a component (list)?
Guys, help me, how to optimize a component (list) in React?
This code is fully working for the component (15 lines with icons are displayed), which suited me, EXCEPT for the static number of lines:
import...
function SlideXItem(props) {
return (
<div className="slide-item">
<TitleH3 text={props.head}/>
<ul>
<li><Picture src={props.el1}/></li>
<li><Picture src={props.el2}/></li>
<li><Picture src={props.el3}/></li>
<li><Picture src={props.el4}/></li>
<li><Picture src={props.el5}/></li>
<li><Picture src={props.el6}/></li>
<li><Picture src={props.el7}/></li>
<li><Picture src={props.el8}/></li>
<li><Picture src={props.el9}/></li>
<li><Picture src={props.el10}/></li>
<li><Picture src={props.el11}/></li>
<li><Picture src={props.el12}/></li>
<li><Picture src={props.el13}/></li>
<li><Picture src={props.el14}/></li>
<li><Picture src={props.el15}/></li>
</ul>
<span>{props.price}</span>
</div>
);
}
function SlideXItem(props) {
const listItems = [];
for (let i = props.minRow; i <= props.maxRow; i++) {
listItems[i] = i;
}
return (
<div className="slide-item">
<TitleH3 text={props.head}/>
<ul>
{listItems.map(str =>
<li key={[str]}><Picture src={`${props.el}${[str]}`}/></li>
)}
</ul>
<span>{props.price}</span>
</div>
);
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question