I am trying to check my JSON array with a bunch of conditions. My goal is to make the whole view dynamic. I am trying to specify two different renderings but it occurs infinite or too long operation in my for loop. I hope you can help.

If I uncomment the console.log() lines in if statement I can easily see the filtered data with using it in useEffect instead of return. But if I add the return statement and try to display my components it gives me infinite or too long ( I coulndn't see the end this is the reason of not assigning it as infinite or too long ) operations.

  function renderItems() {
    if (data && data.attributes?.items) {
      let response = data.attributes.items;
      for (let i = 0; i < response.length; i  ) {
        if (Object.keys(response[i].options).length > 0) {
          return (
            <View>
              <CustomDropdown text={response[i].name} />
            </View>
          );
          //console.log(response[i].name   " is dropdown");
        } else if (Object.keys(response[i].options).length == 0) {
          return (
            <View>
              <Text>TextBox!</Text>
            </View>
          );
          //console.log(response[i].name   " is text");
        }
      }
      console.log("finish");
    }
  }

  function renderFlatList() {
    if (data && data.attributes?.items) {
      return <FlatList renderItem={renderItems} data={data.attributes.items} />;
    }
  }

  return (
    <View style={styles.container}>
      <StatusBar style="light" />
      <View style={{ backgroundColor: "#fff", padding: 20, borderRadius: 15 }}>
        {renderFlatList()}
      </View>
    </View>
  );
};

CodePudding user response：

renderItems will return an item as a param. So no need to loop

 function renderItems({item}) {

       if (Object.keys(item.options).length > 0) {
          return (
            <View>
              <CustomDropdown text={item.name} />
            </View>
          );
         } else if (Object.keys(item.options).length == 0) {
          return (
            <View>
              <Text>TextBox!</Text>
            </View>
          );
          //console.log(item.name   " is text");
        }

}