将prop元素设置为state

Question

我正在映射一个对象数组并将其作为一个支柱传递给我填充它，如下所示。

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>
    )
 }
}

我的目标是显示带有＆＃34; id＆＃34;被点击的对象的编号。截至目前，我收到错误说＆＃34;无法读取undefined＆＃34;的属性dataItems。我在这里错过了什么。我尝试将它设置为状态但是没有工作并且给出了同样的错误。