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(.jpg)',
    description: 'Group project',
    languages: 'HTML, CSS, JavaScript'
  },
  {
    name: 'CRUD System',
    image: 'url(.jpg)',
    description: 'Video game database',
    languages: 'PHP, SQL'
  }
]

export default database;


Any help would be appreciated.

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.

• javascript
• reactjs
• for-loop

Share Improve this question Follow asked Oct 18, 2019 at 11:51 jesusWalksjesusWalks 35544 silver badges1616 bronze badges 2

• 1 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 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 Commented Oct 18, 2019 at 11:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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;

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

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