Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

202
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda