将Json映射到卡片

时间:2016-10-22 19:09:55

标签: javascript reactjs material-ui

我想在反应组件中显示卡片。我有一个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>
        );
    }
}

0 个答案:

没有答案