I am working on my <FlatList> in React Native.

I have the ff flatlist code:

<FlatList
            data={this.state.books}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({item}: {item: any}, index: number) =>
              this.renderItem(item, index)
            }
            ListEmptyComponent={
              <View style={styles.listEmpty}>
                <Text style={styles.emptyText}>Not Reading any books</Text>
              </View>
            }

And then inside my renderItem function:

 renderItem = (item: string, index: number) => (
    <View style={styles.renderContainer}>
      <View style={{flex: 1, justifyContent: 'center', paddingLeft: 10}}>
        <Text>{item}</Text>
      </View>

      <TouchableOpacity onPress={() => console.log('hello')}>
        <View style={styles.btnMarkRead}>
          <Text style={{fontWeight: 'bold', color: 'black'}}>Mark as Read</Text>
        </View>
      </TouchableOpacity>
    </View>
  );

My typescript code is highlighting the word renderItem on my FlatList declaration and it saying:

No overload matches this call.
  Overload 1 of 2, '(props: FlatListProps<String> | Readonly<FlatListProps<String>>): FlatList<String>', gave the following error.
    Type '({ item }: { item: any; }, index: number) => JSX.Element' is not assignable to type 'ListRenderItem<String>'.
  Overload 2 of 2, '(props: FlatListProps<String>, context: any): FlatList<String>', gave the following error.

I have the ff state:

this.state = {
  totalCount: 0,
  readingCount: 0,
  doneCount: 0,
  isAddNewBookVisible: false,
  textInputData: '',
  books: [],
};

What should I do to fix the highlight error?

CodePudding user response：

use

({item, index}) => this.renderItem(item, index)
    

and give type for data passed to Flatlist if you want to refer example below

import React from 'react';
import {FlatList, View} from 'react-native';

interface PropsInterface {}

interface StateInterface {
  books?: any[];
}

class ComponentName extends React.Component<PropsInterface, StateInterface> {
  constructor(props: PropsInterface) {
    super(props);

    this.state = {
      books: [],
    };
  }

  renderItem = (item: any, index: number) => {
    return <View></View>;
  };

  render() {
    return (
      <FlatList
        data={this.state.books}
        renderItem={({item, index}) => this.renderItem(item, index)}
      />
    );
  }
}