Supongamos que tenemos un componente con 2 puntales:

 const component = (props) =>{ return <div> {props.text1} {props.text2} </div> }

Me gustaría crear una matriz del componente anterior con diferentes valores de accesorios

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

Dado que uso esto con tanta frecuencia, busco definir una función para él en lugar for escribir bucles cada vez.

Específicamente, estoy buscando la implementación de una función jsx .

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

o alguna forma mejor y más eficiente de hacerlo. Gracias.

Agregado: ¿Por qué es esto más eficiente? Podría ingresar matrices de datos de mi archivo json en lugar de una entrada individual. También ayuda con la claridad de mi código porque lo uso muy a menudo. Nadie quiere un montón de bucles for y quizás bucles for dentro de otro bucle for en un documento.