Warning "key is not a prop" after using IOFlatlist

[geertvansoest]

Hi,

For tracking banner views and clicks I recently added this package to observe some of the FlatList components in our app. However everything seems to work fine, since I added the package I receive this warning in the console after some props are changing (e.g. after filtering):

Warning: PickerItem: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)

I know the warning is triggered by another component inside IOFlatList, but I don't receive it when I replace IOFlatlist with FlatList. I found out the problem is the FilterSelect, which is in the ListHeaderComponent property, is remounted on each change using the IOFlatlist component. This isn't using the regular FlatList component.

Is there probably a way to prevent these components are remounted on every change using the IOFlatlist?

The FlatList component:

[...]

const ListNews = (props: Props) => {
  const dispatch = useAppDispatch();
  const [isLoading, setIsLoading] = useState(false);
  const [activeCategory, setActiveCategory] = useState('');
  const activeCategoryItems = props.items
    ? props.items[activeCategory] ?? props.items['all']
    : [];

  useMountEffect(() => {
    dispatch(getNews());
  });

  const IOFlatlist = withIO(FlatList);

  return (
    <IOFlatlist
      // @ts-ignore
      data={activeCategoryItems}
      ListHeaderComponent={
        props.categories && (
          <View style={styles.headerContainer}>
            <FilterSelect
              options={mapDataToFormSelectOptions(Object.values(props.categories), 'id', 'title')}
              activeOption={activeCategory}
              setActiveOption={setActiveCategory}
            />
          </View>
        )
      }

[...]

The filter component:

import SelectPicker from 'react-native-form-select-picker';

[...]

export type Props = {
  options: Array<TypeFormSelectOption>;
  activeOption: any;
  setActiveOption: Function;
};

const FilterSelect = (props: Props) => (
  <View style={styles.container}>
    <SelectPicker
      style={styles.input}
      placeholder={'Alles weergeven'}
      placeholderStyle={styles.text}
      selected={props.activeOption}
      onSelectedStyle={styles.text}
      onValueChange={value => {
        props.setActiveOption(value);
      }}>
      {Object.values(props.options).map((option, index) => (
        <SelectPicker.Item
          key={index}
          value={option.value}
          label={option.label}
        />
      ))}
    </SelectPicker>

[...]

Thanks in advance!

Kind regard,
Geert van Soest

[zhbhun]

withIO should not be executed inside a component, please try outside the component.

const IOFlatlist = withIO(FlatList);
const ListNews = (props: Props) => {
  // ... 
  return (
    <IOFlatlist ... />
  )

[geertvansoest]

Thanks @zhbhun, we'll give it a try!