CODEWITHSUNDEEP
javascriptreactjsfor-loop
jesusWalks
jesusWalks

Reputation: 355

React JS Cards using For loop

I can't manage to dynamically produce more than one 'Card' in my React webpage. I import the data from database.js, but I'm clearly not implementing the For loop correctly.

I've tried the loop in a function outside the render() but that didn't work. I need the for loop to produce however many objects I have in the database, but I'm stuck on one. I can call the data within the {} in the thml code, but that's about it.

projects.js


class Projects extends Component {
    constructor(props) {
        super(props);
        this.state = { activeTab: 1 };
    }

    toggleCategories() {
        if (this.state.activeTab === 1) {
            for (let data of database) {
                return (
                    <div className='projects-grid'>
                        <Card shadow={4} style={{ minWidth: '450', margin: 'auto' }}>
                            <CardTitle style={{height: '250px', background: data.image }}></CardTitle>
                            <CardText>
                                {data.name}
                            </CardText>
                            <CardActions border>
                                <Button colored>GitHub</Button>
                                <Button colored>Live Demo</Button>
                            </CardActions>
                        </Card>
                    </div>
                )
            }
        }```

**database.js**

let database = [
  {
    name: 'Trombinoscope',
    image: 'url(https://i.ibb.co/g4mT3K5/html-Css-Js.jpg)',
    description: 'Group project',
    languages: 'HTML, CSS, JavaScript'
  },
  {
    name: 'CRUD System',
    image: 'url(https://i.ibb.co/g4mT3K5/html-Css-Js.jpg)',
    description: 'Video game database',
    languages: 'PHP, SQL'
  }
]

export default database;


Any help would be appreciated.

Upvotes: 0

Views: 7427

Answers (3)

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

Don't return Cards in loop, it will return on first iteration. Create an array and push cards in that array.

toggleCategories() {
      const catrgories = [];
        if (this.state.activeTab === 1) {
            for (let data of database) {
                catrgories.push(
                    <div className='projects-grid'>
                        <Card shadow={4} style={{ minWidth: '450', margin: 'auto' }}>
                            <CardTitle style={{height: '250px', background: data.image }}></CardTitle>
                            <CardText>
                                {data.name}
                            </CardText>
                            <CardActions border>
                                <Button colored>GitHub</Button>
                                <Button colored>Live Demo</Button>
                            </CardActions>
                        </Card>
                    </div>
                );
         }
    }
}


// use it like

{toggleCategories()}

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074425

You're not looping. You're starting a loop, but then doing a return on the first loop iteration, which stops the loop. If toggleCategories is supposed to render all of those cards, the usual thing is to use map and return an array:

toggleCategories() {
    if (this.state.activeTab === 1) {
        return database.map(data => (
            <div className='projects-grid'>
                <Card shadow={4} style={{ minWidth: '450', margin: 'auto' }}>
                    <CardTitle style={{height: '250px', background: data.image }}></CardTitle>
                    <CardText>
                        {data.name}
                    </CardText>
                    <CardActions border>
                        <Button colored>GitHub</Button>
                        <Button colored>Live Demo</Button>
                    </CardActions>
                </Card>
            </div>
        ));
    }
}

Upvotes: 1

Joey Gough
Joey Gough

Reputation: 3103

I think you aren't returning anything from toggleCategories.

would this work?


class Projects extends Component {
    constructor(props) {
        super(props);
        this.state = { activeTab: 1 };
    }

    toggleCategories() {
        if (this.state.activeTab === 1) {
            return database.map(data => {
               return (
                    <div className='projects-grid'>
                        <Card shadow={4} style={{ minWidth: '450', margin: 'auto' }}>
                            <CardTitle style={{height: '250px', background: data.image }}></CardTitle>
                            <CardText>
                                {data.name}
                            </CardText>
                            <CardActions border>
                                <Button colored>GitHub</Button>
                                <Button colored>Live Demo</Button>
                            </CardActions>
                        </Card>
                    </div>
            })

        }```

**database.js**

let database = [
  {
    name: 'Trombinoscope',
    image: 'url(https://i.ibb.co/g4mT3K5/html-Css-Js.jpg)',
    description: 'Group project',
    languages: 'HTML, CSS, JavaScript'
  },
  {
    name: 'CRUD System',
    image: 'url(https://i.ibb.co/g4mT3K5/html-Css-Js.jpg)',
    description: 'Video game database',
    languages: 'PHP, SQL'
  }
]

export default database;

Upvotes: 2

Related Questions