CODEWITHSUNDEEP
javascriptreactjsreact-native
Shashika Virajh
Shashika Virajh

Reputation: 9487

React native app shows an error saying that key will be undefined even after providing a key

In my RN application, I have the following array.

const PDFItems = [
  { id: 1001, name: 'APPLICATION FORM.PDF', size: '2.77 MB' },
  { id: 1002, name: 'BENEFIT ILLUSTRATION.PDF', size: '368 KB' },
  { id: 1003, name: 'PRODUCT SUMMARY.PDF', size: '2.02 MB' },
  { id: 1004, name: 'TERMS AND CONDITIONS.PDF', size: '269 KB' },
];

I created the following function to render items.

renderPDFItems = () => {
    return PDFItems.map(item => (
      <ListItem
        key={item.id.toString()}
        icon={<Download />}
        title={item.name}
        label={item.size}
        onPress={() => {}}
      />
    ));
  }

This is my ListItem component.

import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import colors from 'res/colors';
import SinglifeText from './text';

interface IProps {
  title: string;
  label: string;
  icon: Object;
  key: string;
  onPress?: Function;
}

class ListItem extends Component<IProps> {
  render() {
    const { title, label, icon, key, onPress } = this.props;

    return (
      <TouchableOpacity onPress={onPress} key={key}>
        <View style={styles.itemContainer}>
          <View style={styles.titleContainer}>
            <View style={styles.icon}>{icon}</View>
            <SinglifeText type={SinglifeText.Types.BUTTON_LBL} label={title} />
          </View>
          <SinglifeText type={SinglifeText.Types.BODY_SMALL} label={label} />
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  itemContainer: {
    borderColor: colors.gray,
    borderRadius: 4,
    borderWidth: 0.5,
    padding: 14,
    paddingVertical: 24,
    flexDirection: 'row',
    alignContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
  },
  titleContainer: {
    flex: 1,
    flexDirection: 'row',
    alignContent: 'center',
    alignItems: 'center',
  },
  icon: {
    marginRight: 10,
  },
});

export default ListItem;

When I run the app, it shows a warning saying that, 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

What am I doing wrong here? My keys are unique and still gives this error.

Upvotes: 0

Views: 351

Answers (3)

Shashika Virajh
Shashika Virajh

Reputation: 9487

As some guys have said above, we don't need the key prop. TouchableOpacity has the key by default, and we can't use key another prop as 'key'

Upvotes: 0

Nanaso Patil
Nanaso Patil

Reputation: 11

It seems your key prop defined is ambiguous to TouchableOpacity key={key}. Try renaming key prop to some other name.

Upvotes: 1

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15708

Just dont name the prop key. Something like id has the same syntactic meaning.

renderPDFItems = () => {
    return PDFItems.map(item => (
      <ListItem
        id={item.id.toString()}
        icon={<Download />}
        title={item.name}
        label={item.size}
        onPress={() => {}}
      />
    ));
  }

ListItem.js

class ListItem extends Component<IProps> {
  render() {
    const { title, label, icon, id, onPress } = this.props;

    return (
      <TouchableOpacity onPress={onPress} key={id}>
        <View style={styles.itemContainer}>
          <View style={styles.titleContainer}>
            <View style={styles.icon}>{icon}</View>
            <SinglifeText type={SinglifeText.Types.BUTTON_LBL} label={title} />
          </View>
          <SinglifeText type={SinglifeText.Types.BODY_SMALL} label={label} />
        </View>
      </TouchableOpacity>
    );
  }
}

Upvotes: 1

Related Questions