I am fetching an array of two objects. there are "title" and "iqtiboslar" array inside objects. and show it in SectionList but it is giving an error: "can not read properties of undefined(reading 'length')". Here is my code. Any ideas will be highly appreciated

const Item = ({iqtiboslar}) => (
  <View>
    <Text>{iqtiboslar}</Text>
  </View>
);
const HomeScreen = ({navigation}) => { const [quote, setQuote] = useState();
useEffect(() => {
    fetchQuotes();
    return () => {
      setQuote();
    };
  }, []);

  const fetchQuotes = async () => {
    try {
      const quoteCollection = await firestore().collection('iqtiboslar').get(); // get(:field) to get specific doc
      quoteCollection._docs.map(doc => setQuote(doc.data().items));
      // quoteCollection._docs.map(doc => console.log(doc));
    } catch (error) {
      console.log(error);
    }
  };


  return (
    <View style={styles.container}>
      {quote ? (
    <SectionList
      sections={quote}
      keyExtractor={(item, index) => item   index}
      renderItem={({item}) => <Item title={item.title} />}
      renderSectionHeader={({section}) => <Text>{section.title}</Text>}
    />
  ) : (
    <ActivityIndicator />
  )}        </View>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'red',
  },
});

CodePudding user response：

Try this code

<SectionList
          sections={quote}
          keyExtractor={(item, index) => item   index}
          renderItem={({item}) => <Text>{item}</Text>}
          renderSectionHeader={({section: {title}}) => (
            <Text style={styles.text}>{title}</Text>
          )}

CodePudding user response：

It seems to me that you are destructuring the expression twice while creating the Item component and using it as renderItem.

Can you try:

const Item = (iqtiboslar) => (
  <View>
    <Text>{iqtiboslar}</Text>
  </View>
);

or

renderItem={(item) => <Item title={item.title} />