How to optimize a component (list)?

Question

React

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

Everything would be fine, but I would like to reuse this component with a different number of lines, so I want to optimize the code - make the number of lines dynamic.

Tried something like this:

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

In this case, 15 lines appear (which is what I need) + the correct titleH3, BUT on the picture (Picture) - writes undefined1, undefined2, undefined3 ... for each line. How to do it right?

Answer 1

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