React for loop only running twice

Question

i'm having a little trouble with a for loop. This program gathers data from my back end, and is supposed to loop through the data. But, the loop is only displaying 1 _id, and console.logging two 10's. I appreciate the help in advanced, and all tips / criticism is appreciated.

**The problem seems to be in the i++... if i log I every time, it stays as 0!

import React, { Component } from 'react';
import getTransactions from '../api/TransactionAPI';

export class Dashboard extends Component {

state = {
    transactions: ""
}

componentDidMount() {
    getTransactions().then(res => {
        this.setState({ transactions: res.data });
      }).catch(error => {
        console.log(error)
      });
}

mapData(data) {
    for (let i = 0; i < data.length; i++) {
        console.log(data.length);
        return <h1>{data[i]._id}</h1>
    }
}

render() {
    if (this.state.transactions === "") {
        return (
            <p>loading...</p>
        )
    } else {
        return (
            <div>
                { this.mapData(this.state.transactions) }
            </div>
        )
    }
}

}

export default Dashboard;

larz · Accepted Answer · 2020-03-29 23:57:00Z

1

You aren't returning anything from mapData. Try

mapData(data) {
   const elements = [];
   for (let i = 0; i < data.length; i++) {
       console.log(data.length);
       elements.push(<h1>{data[i]._id}</h1>)
   }

   return elements;
}

Additionally, instead of a for loop, (making some assumptions about your data) you can use .map instead.

mapData(data) {
    return data.map(d => (
        <h1>{d._id}</hi>
    ))
}

answered Mar 29, 2020 at 23:57

larz

5,7662 gold badges13 silver badges23 bronze badges

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

1 Comment

Cody Over a year ago

Thank you very much for the help!

Collectives™ on Stack Overflow

React for loop only running twice

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related