Suppose that we have a component with 2 props:

const component = (props) =>{

      return <div> {props.text1} {props.text2} </div>

}

I would like to create an array of the above component with different props values

[<component text1=1 text2=-1>, <component text1=2 text2=-2>,...,<component text1=n text2=-n>]

Since I am using this so often I am looking to define a function for it rather than writing for loops every time.

Specifically, I am looking for implementation of a jsx function

componentArray(Component,propsArray,valueMatrix,repeatedTimes){
   
   // Column of the valueMatrix corresponds values to be assigned for one props
   // Below are not legit javascript code, just for illustration purposes

   let array = [];
   for (i=0, i<repeatedTimes, i+1){

       array.push(<Component
 
                     propsArray[0] = valueMatrix[0,i],
                     propsArray[1] = valueMatrix[1,i],...
                     propsArray[k] = valueMatrix[k, i] />)

   }

   return array;

}

or some better and more efficient way of doing this. Thank you.

Added: Why is this more efficient? I could input my json file data arrays instead of individual entry. Also it helps with my code clarity because I use this so often. No one wants a bunch of for loops and perhaps for loops inside another for loop in a document.