title: ReactJS - Map for state array
body: <p>I am creating a finance website but having trouble because .map is not executing on a state array.I have been banging my head on the wall for the pass two days. I am thinking that it is something really small</p>
  
  <p>Here is the <code>GET</code> call I make to populate the array and set the state. </p>
  
  <pre><code>.then(() =&gt; {
              var transactions = [];
              axios.get("http://localhost:5000/transactions").then(res =&gt; {
                  res.data.transactions.transactions.forEach(function(txn, idx) {
                      transactions.push({name: txn.name, amount: txn.amount, date: txn.date});
                      // item.push("hey");
                  });
              });
              this.setState({transactions: transactions, balance: content.balance});
          }).catch(err =&gt; console.log(err));
  </code></pre>
  
  <p>Then my render method looks like this</p>
  
  <pre><code>render() {
          var list = this.state.transactions.map((item, id) =&gt; {
              return (
                  &lt;VerticalTimelineElement
                      className="vertical-timeline-element--work"
                      contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
                      contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
                      date={item.date}
                      iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
                      key={id}
                  &gt;
                      &lt;h3 className="vertical-timeline-element-title"&gt;{item.name}&lt;/h3&gt;
                      &lt;h4 className="vertical-timeline-element-subtitle"&gt;${item.amount}&lt;/h4&gt;
                  &lt;/VerticalTimelineElement&gt;
              );
          });
  
          return (
              &lt;VerticalTimeline&gt;
                  {list}
              &lt;/VerticalTimeline&gt;
          );
      }
  </code></pre>