React JS Cards using For loop

Question

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.

You're not looping. You're starting a loop, but then doing a return on the first loop iteration, which stops the loop. Is toggleCategories supposed to render all of those cards? — T.J. Crowder
– T.J. Crowder, Commented Oct 18, 2019 at 11:54
toggleCategories is used to select which type of project I will show. I'll add an If statement at some point to show just valid data, but I haven't got that far yet. — jesusWalks
– jesusWalks, Commented Oct 18, 2019 at 11:59

Joey Gough · Accepted Answer · 2019-10-18 11:56:20Z

2

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;

answered Oct 18, 2019 at 11:56

Joey Gough

3,1232 gold badges28 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jesusWalks Over a year ago

Thanks, guys. Using database.map(data => ) is the way forward.

Zohaib Ijaz Over a year ago

@JamesRossCodes Just wanted to let OP know what he was doing wrong

T.J. Crowder · Accepted Answer · 2019-10-18 11:56:43Z

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

Zohaib Ijaz · Accepted Answer · 2019-10-18 11:57:31Z

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

Collectives™ on Stack Overflow

React JS Cards using For loop

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related