score:1

you have various ways to achieve this.

in react you can render array of elements inside jsx, just like any other variable. if you wish to render components based some data that comes from api you could as well map your data and pass data to component. "key" property is required in both cases so react knows when structure changes.

live example on codesandbox https://codesandbox.io/s/bold-grass-p90q9

const list = [
  <mycomponent key="one" text="im 1st!" />,
  <mycomponent key="two" text="im 2nd" />,
  <mycomponent key="three" text="im 3rd" />
];

const data = [
  { text: "1st string" },
  { text: "2st string" },
  { text: "3st string" }
];

export default function app() {
  return (
    <div classname="app">
      <h3>render array</h3>
      {list}
      <h3>map from data</h3>
      {data.map(({ text }) => (
        <mycomponent key={text} text={text} />
      ))}
    </div>
  );
}

score:1

check this and let me know if this is what you want

sandbox

https://codesandbox.io/s/crazy-lalande-mx5oz

//have taken limit as 10 for demo
export default function app() {
  function print() {
    let group = [];
    for (let i = 0; i <= 10; i++) {
      group.push(<group key={i} />);
    }
    group.splice(1, 0, <banner/>);// adding banner at 1st index
    return group;
  }
  return <div>{print()}</div>;
}

score:2

you can create an array of jsx.elements e.g.

const arr: jsx.elements[] = [];

listgroups.foreach((group, i) => {
  if(i == 1) arr.push(<banner/>);
  // add your groups
})

and you can render the arr.


Related Query

More Query from same tag