Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Can't assign my JSON to make dynamic display with flatlist

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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

}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading