CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
EdG
EdG

Reputation: 2351

Populate Material UI Card Component in React Project

I am having a page in my project where all the expandable cards are there like a list. Currently I have code which is not scalable. I am having so many card tags in this code. What I want to do is to load the data for each field of card from a json and just have a short loop which shows all the cards by running just one loop/ map kind of function. I cannot keep adding card tags everytime I want some more cards added in the list. How should I do it?

export default class ExpandableCard extends Component {


    render(){
        return (
    <MuiThemeProvider>
        <div>
        <div>
            <Card>
                <CardHeader
                    title="Game Of Thrones"
                    subtitle="S01 E02"
                    actAsExpander={true}
                    showExpandableButton={true}
                />
                <CardText expandable={true}>
                    Friends is an American television sitcom, created by David Crane and Marta Kauffman,
                    which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
                    seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
                    Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
                </CardText>
            </Card>
            <Card>
            <CardHeader
                title="Game Of Thrones"
                subtitle="S01 E02"
                actAsExpander={true}
                showExpandableButton={true}
            />
            <CardText expandable={true}>
                Friends is an American television sitcom, created by David Crane and Marta Kauffman,
                which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
                seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
                Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
            </CardText>
        </Card>
            <Card>
                <CardHeader
                    title="Game Of Thrones"
                    subtitle="S01 E02"
                    actAsExpander={true}
                    showExpandableButton={true}
                />
                <CardText expandable={true}>
                    Friends is an American television sitcom, created by David Crane and Marta Kauffman,
                    which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
                    seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
                    Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
                </CardText>
            </Card>
            <Card>
                <CardHeader
                    title="Game Of Thrones"
                    subtitle="S01 E02"
                    actAsExpander={true}
                    showExpandableButton={true}
                />
                <CardText expandable={true}>
                    Friends is an American television sitcom, created by David Crane and Marta Kauffman,
                    which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
                    seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
                    Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
                </CardText>
            </Card>
            <Card>
                <CardHeader
                    title="Game Of Thrones"
                    subtitle="S01 E02"
                    actAsExpander={true}
                    showExpandableButton={true}
                />
                <CardText expandable={true}>
                    Friends is an American television sitcom, created by David Crane and Marta Kauffman,
                    which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
                    seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
                    Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
                </CardText>
            </Card>
            <Card>
                <CardHeader
                    title="Game Of Thrones"
                    subtitle="S01 E02"
                    actAsExpander={true}
                    showExpandableButton={true}
                />
                <CardText expandable={true}>
                    Friends is an American television sitcom, created by David Crane and Marta Kauffman,
                    which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
                    seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
                    Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
                </CardText>
            </Card>
            <Card>
                <CardHeader
                    title="Game Of Thrones"
                    subtitle="S01 E02"
                    actAsExpander={true}
                    showExpandableButton={true}
                />
                <CardText expandable={true}>
                    Friends is an American television sitcom, created by David Crane and Marta Kauffman,
                    which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
                    seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
                    Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
                </CardText>
            </Card>
            <Card>
                <CardHeader
                    title="Game Of Thrones"
                    subtitle="S01 E02"
                    actAsExpander={true}
                    showExpandableButton={true}
                />
                <CardText expandable={true}>
                    Friends is an American television sitcom, created by David Crane and Marta Kauffman,
                    which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
                    seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
                    Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
                </CardText>
            </Card>
            <Card>
                <CardHeader
                    title="Game Of Thrones"
                    subtitle="S01 E02"
                    actAsExpander={true}
                    showExpandableButton={true}
                />
                <CardText expandable={true}>
                    Friends is an American television sitcom, created by David Crane and Marta Kauffman,
                    which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
                    seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
                    Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
                </CardText>
            </Card>
            <Card>
                <CardHeader
                    title="Game Of Thrones"
                    subtitle="S01 E02"
                    actAsExpander={true}
                    showExpandableButton={true}
                />
                <CardText expandable={true}>
                    Friends is an American television sitcom, created by David Crane and Marta Kauffman,
                    which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
                    seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
                    Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
                </CardText>
            </Card>
            <Card>
                <CardHeader
                    title="Game Of Thrones"
                    subtitle="S01 E02"
                    actAsExpander={true}
                    showExpandableButton={true}
                />
                <CardText expandable={true}>
                    Friends is an American television sitcom, created by David Crane and Marta Kauffman,
                    which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
                    seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
                    Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
                </CardText>
            </Card>
            <Card>
                <CardHeader
                    title="Game Of Thrones"
                    subtitle="S01 E02"
                    actAsExpander={true}
                    showExpandableButton={true}
                />
                <CardText expandable={true}>
                    Friends is an American television sitcom, created by David Crane and Marta Kauffman,
                    which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
                    seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
                    Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
                </CardText>
            </Card>
        </div>
            <FloatingActionButton className="floatingButton" backgroundColor='#293C8E'>
                <ContentAdd />
            </FloatingActionButton>
        </div>
            </MuiThemeProvider>
        );
    }
}

Upvotes: 0

Views: 2411

Answers (1)

jacoballenwood
jacoballenwood

Reputation: 3057

do something like this and loop through your data building your cards. I'm obviously making assumptions about how your data will be structured, but I hope it makes the point clear

export default class ExpandableCard extends Component {

    render(){
        // pass in your data through props
        const { cardDataJSONObject } = this.props

        // assuming you are getting your card data in a large json object
        let cardList = []
        Object.keys(cardDataJSONObject).forEach((cardIndex) => {
            let card = cardDataJSONObject[cardIndex]
            cardList.push (
                <Card>
                    <CardHeader
                        title={card.title}
                        subtitle={card.subtitle}
                        actAsExpander={true}
                        showExpandableButton={true}
                    />
                    <CardText expandable={true}>
                        { card.text }
                    </CardText>
                </Card>            
            )
        })

        return (
            <MuiThemeProvider>
                <div>
                    <div className='card-list'>
                        {/* here we are rendering the list of cards we build up above */}
                        { cardList }
                    </div>
                    <FloatingActionButton className="floatingButton" backgroundColor='#293C8E'>
                        <ContentAdd />
                    </FloatingActionButton>
                </div>
            </MuiThemeProvider>
        );
    }
}

Upvotes: 1

Related Questions