Im Trying to Use loop for the following in In react Native but it now working

<View style={styles.RowContainer1}>
                <View style={styles.WhiteBox}></View>
                <View style={styles.SmallgreenBox}></View>
                <View style={styles.WhiteBox}></View>
                <View style={styles.WhiteBox}></View>
                <View style={styles.WhiteBox}></View>
                <View style={styles.WhiteBox}></View>
            </View>

            <View style={styles.RowContainer1}>
                <View style={styles.WhiteBox}></View>
                <View style={styles.SmallgreenBox}></View>
                <View style={styles.SmallgreenBox}></View>
                <View style={styles.SmallgreenBox}></View>
                <View style={styles.SmallgreenBox}></View>
                <View style={styles.SmallgreenBox}></View>
            </View>

            <View style={styles.RowContainer1}>
                <View style={styles.WhiteBox}></View>
                <View style={styles.WhiteBox}></View>
                <View style={styles.SmallRedBox}></View>
                <View style={styles.WhiteBox}></View>
                <View style={styles.WhiteBox}></View>
                <View style={styles.WhiteBox}></View>
            </View>

My Code using for loop but it doesn't go as i expect seems like RowContainer is not working or not rendring

export default function Ludo(props) {
  const blocks = [];

  for (let i = 0; i <= 2; i  ) {
    
    for (let k = 0; k <= 6; k  ) {
      blocks.push(
        <View style={styles.RowContainer1}>
          <View
            style={
              i == 0
                ? k == 1
                  ? styles.SmallgreenBox
                  : styles.WhiteBox
                : i == 1
                  ? k == 1
                    ? styles.WhiteBox
                    : styles.SmallgreenBox
                  : i == 2
                    ? k == 2
                      ? styles.SmallRedBox
                      : styles.WhiteBox
                    : styles.WhiteBox

            }
          ></View>
        </View>
      )
    }
  }

Output The Output is this after using loop

Expected Output

CodePudding user response：

The problem is that you're pushing a View with RowContainer1 in the inner loop.

When you want to use a nested loop you can do it like this. A for loop can't be used within the component you're returning so I did an alternative way with new Array which takes in the length and then maps over it and only uses the index which is k

  for (let i = 0; i <= 2; i  ) {
    blocks.push(
      <View style={styles.RowContainer1}>
        {new Array(6).fill(null).map((_, k) => (
          <View
            style={
              i == 0
                ? k == 1
                  ? styles.SmallgreenBox
                  : styles.WhiteBox
                : i == 1
                ? k == 0 // changed this from 1 to 0 since it did not align with the expected output image
                  ? styles.WhiteBox
                  : styles.SmallgreenBox
                : i == 2
                ? k == 2
                  ? styles.SmallRedBox
                  : styles.WhiteBox
                : styles.WhiteBox
            }
          ></View>
        ))}
      </View>
    );
  }

Hope this helps you with your project!