Как оптимизировать компонент(список)?

Question

[Denis_8106]

Ребята, помогите, как в React оптимизировать компонент(список)?
Этот код полность рабочий для компонента (выводится 15 строк с иконками), что меня устраивало, КРОМЕ статического кол-во строк:

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>
	);
}

В данном случаи, появляются 15 строк (что мне и надо) + правильный titleH3, НО по картинке (Picture) - пишет undefined1, undefined2, undefined3... по каждой строчке. Как сделать правильно?

Comments

[WbICHA]

key={[str]}

Зачем ты создаёшь массив?

Answer 1

[Алексей Абрамов]

src={props['el'+str]}

Comments

[Алексей Абрамов]

Или так props[`el${str}`]