Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

207
Vistas
Quiero que la condición solo itere a través de la función de mapa, no la parte de representación
 const generateTable = () => { let table = []; // Outer loop to create parent const rowValue = fetchedRowData; const columnsValue = fetchedColumnData; for (let i = 0; i < columnsValue; i++) { let children = []; //Inner loop to create children for (let j = 0; j < rowValue; j++) { children.push( products.map((item, index, k) =>{ if (i+1 == item.placementColumn.value && j+1 == item.placementRow.value) { return( <TouchableOpacity style={{width: 50, height: 50, marginBottom:10, marginLeft:5, backgroundColor: 'red', alignItems: "center", justifyContent: 'center'}} onPress={() => navigation.navigate('Internet', { paramKey: telephone, })}> <Text style={styles.buttonText}>row: {j+1}</Text> <Text style={styles.buttonText}>column: {i+1}</Text> </TouchableOpacity> ) } else { return( <TouchableOpacity style={{width: 50, height: 50, marginBottom:10, marginLeft:5, backgroundColor: vmColor, alignItems: "center", justifyContent: 'center'}} onPress={() => navigation.navigate('Internet', { paramKey: telephone, })}> <Text style={styles.buttonText}>row: {j+1}</Text> <Text style={styles.buttonText}>column: {i+1}</Text> </TouchableOpacity> ) } }) ); } table.push( <View key={i}> <>{children}</> </View> ); } return table; };

Aquí están los puntos clave para entender mi problema:

  • He generado una tabla en la función anterior, que toma filas y columnas de la base de datos y genera una tabla para cada usuario.
  • Quiero hacer una condición de que si el valor de las filas y columnas coincide con mi valor deseado, el color del cuadro cambia.
  • Tenga en cuenta que mis valores deseados también están en una matriz que necesita iterar para comparar cada valor con los valores de columna y fila (como puede ver en la función anterior)
  • La función anterior cambia de color, pero también itera el bucle de fila (en el que se mapea la matriz) varias veces las entidades en la matriz del producto.
  • Solo quiero iterar la condición a través del ciclo para que cada valor en la matriz se compare pero no el elemento jsx para representar varias veces
  • Cualquier sugerencia y solución será apreciada.
  • Gracias de antemano :)
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Si la única diferencia es algo de estilo, tienes dos opciones:

  1. Operador condicional (ternario)
 const generateTable = () => { let table = []; // Outer loop to create parent const rowValue = fetchedRowData; const columnsValue = fetchedColumnData; for (let i = 0; i < columnsValue; i++) { let children = []; //Inner loop to create children for (let j = 0; j < rowValue; j++) { children.push( products.map((item, index, k) => { return ( <TouchableOpacity style={{ width: 50, height: 50, marginBottom: 10, marginLeft: 5, backgroundColor: i + 1 == item.placementColumn.value && j + 1 == item.placementRow.value ? 'red' : vmColor, alignItems: "center", justifyContent: 'center' }} onPress={() => navigation.navigate('Internet', { paramKey: telephone })} > <Text style={ styles.buttonText }> row: { j + 1 } </Text> <Text style = { styles.buttonText } > column: { i + 1 } </Text> </TouchableOpacity> ) }) ); } table.push( <View key={i}> { children } </View> ); } return table; };
  1. Agregar varios estilos
 const generateTable = () => { let table = []; // Outer loop to create parent const rowValue = fetchedRowData; const columnsValue = fetchedColumnData; let extraStyles; for (let i = 0; i < columnsValue; i++) { let children = []; //Inner loop to create children for (let j = 0; j < rowValue; j++) { children.push( products.map((item, index, k) => { if (i + 1 == item.placementColumn.value && j + 1 == item.placementRow.value) { extraStyles = { backgroundColor: 'red' }; } else { extraStyles = { backgroundColor: vmColor }; } return ( <TouchableOpacity style={[{ width: 50, height: 50, marginBottom: 10, marginLeft: 5, alignItems: "center", justifyContent: 'center' }, extraStyles]} onPress={() => navigation.navigate('Internet', { paramKey: telephone })} > <Text style={ styles.buttonText }> row: { j + 1 } </Text> <Text style = { styles.buttonText } > column: { i + 1 } </Text> </TouchableOpacity> ) }) ); } table.push( <View key={i}> { children } </View> ); } return table; };
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda