title: Reactjs - Uncaught TypeError: Cannot read property 'then' of undefined
body: <p>I have a problem here:
  I am always getting this error when I am trying to use this code in componentDidMount: Uncaught TypeError: Cannot read property 'then' of undefined</p>
  
  <p>This is the code of the Component where the error occurs:
  components/Portfolio.jsx</p>
  
  <pre><code>import React, { Component } from 'react'
  import Header from './Header'
  import { connect } from 'react-redux';
  import { auth } from '../actions';
  import Popup from 'reactjs-popup';
  import { portfolio } from '../actions'
  import thunk from 'redux-thunk'
  
  class Portfolio extends Component {
  
    state = {
      coin: undefined,
      quantity: undefined,
      buy_price: undefined,
      coindata: undefined,
      isLoaded: undefined,
    } 
  
      componentDidMount(){
          // this.props.fetchPortfolio();
          //   this.fetchCoins();
        this.props.fetchPortfolio().then(() =&gt; {
        this.fetchCoins();
        });
      }
  
    componentDidUpdate(prevProps) {
      if(this.props.auth.user !== prevProps.auth.user) {
        this.fetchCoins();
      }
    }
  
  
    submitInvestment = (e) =&gt; {
      e.preventDefault();
      this.props.addInvestment(this.state.coin, this.state.quantity,             this.state.buy_price);
      this.props.fetchPortfolio();
      this.fetchCoins();
    }
  
  
    fetchCoins(){
  
      let coins = this.props.portfolio.map(coin =&gt; coin.coin).join(",");
      console.log(coins);
      //console.log(coins)
      fetch("https://min-api.cryptocompare.com/data/pricemultifull?    fsyms="+coins+"&amp;tsyms=USD")
          .then(res =&gt; res.json())
          .then(
            (result) =&gt; {
              console.log(result)
              this.setState({
                isLoaded: true,
                coindata: result,
              })
            },
            (error) =&gt; {
              this.setState({
                isLoaded: true,
                error
              });
            }
          )
  
    }
  
  
  
    render() {
      ...
     }
    }
  }
  
  const mapStateToProps = state =&gt; {
      let errors = [];
      if (state.portfolio.errors) {
          errors = Object.keys(state.portfolio.errors).map(field =&gt; {
              return {field, message: state.portfolio.errors[field]};
          });
      }
      return {
        user: state.auth.user,
        auth: state.auth,
        portfolio: state.portfolio.portfolio,
        portfolioLoaded: state.portfolio.portfolioLoaded,
        coin_symbol: state.coin,
        errors
        // errors
      }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
          addInvestment: (coin, quantity, buy_price) =&gt; {
            return dispatch(portfolio.addInvestment(coin, quantity, buy_price));
          },
          deleteInvestment: (coin) =&gt; {
            dispatch(portfolio.deleteInvestment(coin));
          },
          fetchPortfolio: () =&gt; {
            dispatch(portfolio.fetchPortfolio());
          }
      }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Portfolio); //
  </code></pre>
  
  <p>This is the fetchPortfolio function in actions/portfolio.js:</p>
  
  <pre><code>export const fetchPortfolio = () =&gt; {
    return (dispatch, getState) =&gt; {
      let headers = {'Content-Type': 'application/json'}
      let {token} = getState().auth
  
      if (token) {
        headers['Authorization'] = `Token ${token}`
      }
  
      return fetch('/api/coins/', {headers })
        .then(res =&gt; {
          if (res.status &lt; 500) {
            return res.json().then(data =&gt; {
              return {status: res.status, data}
            })
          } else {
            console.log('Server Error!')
            throw res
          }
        })
        .then(res =&gt; {
          if (res.status === 200) {
            dispatch({type: 'FETCH_PORTFOLIO', portfolio: res.data})
          } else if (res.status === 401 || res.status === 403) {
            dispatch({type: 'AUTHENTICATION_ERROR', data: res.data})
            throw res.data
          }
        })
    }
  }
  </code></pre>
  
  <p>And this is the App.js code:</p>
  
  <pre><code>import React, { Component } from 'react'
  
  import {Switch, Route, BrowserRouter, Redirect, Link} from 'react-router-dom'
  import { Provider, connect } from 'react-redux'
  import { createStore, applyMiddleware } from 'redux'
  import thunk from 'redux-thunk'
  
  import {auth} from './actions'
  import rootReducer from './reducers'
  
  import News from './components/News'
  import NotFound from './components/NotFound'
  import Login from './components/Login'
  import Register from './components/Register'
  import Market from './components/Market'
  import Portfolio from './components/Portfolio'
  
  let store = createStore(rootReducer, applyMiddleware(thunk))
  
  class RootContainerComponent extends Component {
    componentDidMount () {
      this.props.loadUser()
    }
  
    render () {
      if (this.props.auth.isLoading) {
        return &lt;p&gt;Loading..&lt;/p&gt;
      } else {
        return (
          &lt;BrowserRouter&gt;
            &lt;Switch&gt;
              &lt;Route exact path='/' component={News} /&gt;
              &lt;Route exact path='/login' component={Login} /&gt;
              &lt;Route exact path='/register' component={Register} /&gt;
              &lt;Route exact path='/markets' component={Market} /&gt;
              &lt;Route exact path='/portfolio' component={Portfolio} /&gt;
              &lt;Route component={NotFound} /&gt;
            &lt;/Switch&gt;
          &lt;/BrowserRouter&gt;
        )
      }
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      auth: state.auth
    }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      loadUser: () =&gt; {
        return dispatch(auth.loadUser())
      }
    }    
  }
  
  let RootContainer = connect(mapStateToProps, mapDispatchToProps)        (RootContainerComponent)
  
  export default class App extends Component {
    render () {
      return (
        &lt;Provider store={store}&gt;
          &lt;RootContainer /&gt;
        &lt;/Provider&gt;
      )
    }
  }
  </code></pre>
  
  <p>I hope you can help me with the problem!</p>