for loop not incrementing inside react native child

Question

i have a list of child components being rendered inside a parent in React native, they look something like this. Inside the InnerLoop function, the i is not incrementing past zero. The length of the child list is generated by pushing values into globalArrayTwo from the parent which is working. the Global Array one property is also being passed in properly and visible to the child

   function parentElement(props) {
        const [globalArrayOne,setGlobalArrayOne] = useState([]);

        useEffect(()=>{

          fetch('someAPI')
          .(res=>res.json())
          .then(res => setGlobalArrayOne(res))
       
        },[props])

        let globalArrayTwo = []
    
        return (
            <View>
                {
                    globalArrayTwo.push(1),
                    globalArrayTwo.push(2),
                    globalArrayTwo.push(3),
                    globalArrayTwo.push(4)
    
                }
                {
                    globalArrayTwo.map((i) => {
                        return (
                            <ChildElement
                                propArray={globalArrayOne}
                            />
                        )
                    })
                }
            </View>
        )
    
    }
    
    
    function childElement(props) {
    
        function InnerLoop() {
            for (let i = 0; i < props.propArray; i++) {
                if (condistionIsMet) {
                    return "TEXTSTRINGONE"
                } else {
                    return "TEXTSTRINGTWO"
                }
            }
        }
    
        return (
            <View>
              <Text>
                {InnerLoop()}
              </Text>
            </View>
        )
    }

Answer 1

I think in your InnerLoop function it should be i<props.propsArray.length and not i<props.propsArray