Установите элемент prop в состояние

Я сопоставляю массив объектов и передаю его как опору, где я заполняю его, один за другим, как показано ниже.

const bottomData = [
{
    name: 'Beneficial Owner Details',
    id:'1',
},

{
    name: 'Residential Address',
    id:'2',
},]

 mapData() {
    return bottomData.map(list => <Card key = {list.id} dataItems = {list}/>)

 }

Здесь я извлекаю объект и заполняю детали по своему желанию.

export default class Card extends Component {
 constructor(props) {
    super(props);
    this.state = {
        sectionId: ''
    }
 }

sectionPress() {
 if (this.props.dataItems.id == "1"){
    alert("ID is 1")
 }
}
 render() {
    return (
   <TouchableHighlight onPress = {this.sectionPress}>
     <View >
        <Text>{this.props.dataItems.name}</Text>         
     </View>
   </TouchableHighlight>
    )
 }
}

Моя цель - отобразить предупреждение с номером «id» объекта, по которому щелкают. На данный момент я получаю сообщение об ошибке «Не могу прочитать элементы данных свойства неопределенного». Что мне здесь не хватает. Я тоже попробовал установить его в состояние, но не сработало и выдало ту же ошибку.