title: Data coming back as undefined in react
body: <p>I'm trying to pass data down to a component with react router. I've tested that the end point works correctly, so it's not a server issue.</p>
  
  <p>This is my function that is supposed to grab the page data based on the ID param:</p>
  
  <pre><code>    instance.get(`/admin/page/${id}`).then((response) =&gt; {
        return response.data
      }).catch((error) =&gt; {
        console.log(error)
      })
    }
  </code></pre>
  
  <p>And my React Route:</p>
  
  <pre><code>    &lt;Route path="/admin/edit-page/:id" render={ (props) =&gt; (
        &lt;AddEditPage {...props} page={this.setPage(props.match.params.id)} /&gt;
      )} /&gt;
  </code></pre>
  
  <p>But page is coming back undefined when I goto </p>
  
  <blockquote>
    <p>localhost:3000/admin/edit-page/1</p>
  </blockquote>
  
  <p>If I <code>console.log(response.data)</code> inside the <code>setPage</code> function, I can see the correct data in the console. This is so weird. </p>
  
  <p>Am I not supposed to <code>return response.data</code> ??</p>
  
  <p>This is the whole <code>App.js</code> container file:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    BrowserRouter as Router,
    Route
  } from 'react-router-dom'
  import axios from 'axios'
  
  import Header from '../components/Header'
  
  import Dashboard from './Dashboard'
  import AddEditPage from './AddEditPage'
  
  const instance = axios.create({baseURL: 'http://localhost:1337'})
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        "pages": []
      }
      this.createPage = this.createPage.bind(this)
      this.getPages = this.getPages.bind(this)
      this.setPage = this.setPage.bind(this)
  
    }
  
    componentDidMount() {
      this.getPages()
    }
  
    getPages() {
      instance.get('/admin/listPages')
        .then(
          (response) =&gt; {
            this.setState(
              {
                "pages": response.data
              }
            )
          })
        .catch((error) =&gt; {console.log(error)})
    }
  
    createPage(page) {
      instance.post('/admin/createPage',page).then((response) =&gt; {
        this.getPages();
        //TODO: Create my own history object as props, then use router to push route.
        window.location.replace('/')
      }).catch((error) =&gt; {
        console.log(error)
      })
    }
  
    setPage(id) {
      instance.get(`/admin/page/${id}`).then((response) =&gt; {
        return response.data
      }).catch((error) =&gt; {
        console.log(error)
      })
    }
  
    render() {
      return (
        &lt;Router&gt;
          &lt;div className="Router"&gt;
            &lt;div className="Navbar"&gt;
              &lt;Header /&gt;
            &lt;/div&gt;
            &lt;div className="Wrapper"&gt;
              &lt;Route exact path="/" render={ (props) =&gt; (
                &lt;Dashboard {...props} pages={this.state.pages} /&gt;
              )} /&gt;
              &lt;Route path="/admin/new-page" render={ (props) =&gt; (
                &lt;AddEditPage {...props} createPage={this.createPage} /&gt;
              )} /&gt;
              &lt;Route path="/admin/edit-page/:id" render={ (props) =&gt; (
                &lt;AddEditPage {...props} page={this.setPage(props.match.params.id)} /&gt;
              )} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
  
      );
    }
  }
  
  export default App;
  </code></pre>