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:
Si la única diferencia es algo de estilo, tienes dos opciones:
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; }; 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; };