Question

0

199

Views

I want the condition only to iterate through map function not the render part

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

Here are the key points to understand my problem:

I have generated a table in the above function, which takes rows and columns from the database and generate a table for every user.
I want to make a condition that if rows and columns value matches my desired value the colour of the box changes.
Note that my desired values are also in an array that needs to iterate to compare each value with column and row values (As you can see in above function)
The above function changes colour but it also iterates the row loop (in which array is being mapped) number of times the entities in the product array.
I just want to iterate condition through the loop so that each value in the array gets compared but not the jsx element to render multiple times
Any suggestion and solution will be appreciated.
Thanks in Advance :)

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T23:36:39.600Z

If the only difference is some styling, you have two options:

Conditional (ternary) operator

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

Adding multiple styles

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

0

199

I want the condition only to iterate through map function not the render part

1 answers

0

Find remote jobs

Andres GPT