我想在反应组件中显示卡片。我有一个json对象数组,其中包含要放入卡中的数据。我正在使用map函数来执行此操作。当我运行此代码时,我只得到我的网页中的文字而没有卡片。 这是我的代码。
const data =
[
{
id: 1,
Episode_Name : "Game Of Throne S01 E01" ,
description: "THis is description"
content: "Hi I am test content"
},
{
id: 1,
Episode_Name : "Game Of Throne S01 E01" ,
description: "THis is description"
content: "Hi I am test content"
},
{
id: 1,
Episode_Name : "Game Of Throne S01 E01" ,
description: "THis is description"
content: "Hi I am test content"
}
];
export default class ExpandableCard extends Component {
render(){
var populate = data.map(function (value) {
return(
<MuiThemeProvider>
<card>
<CardHeader
title={value.Episode_Name}
subtitle={value.description}
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
{value.content}
</CardText>
</card>
</MuiThemeProvider>
)
});
return (
<MuiThemeProvider>
<div>
<div>
{populate}
</div>
<FloatingActionButton className="floatingButton" backgroundColor='#293C8E'>
<ContentAdd />
</FloatingActionButton>
</div>
</MuiThemeProvider>
);
}
}