title: React - TypeError: Cannot read property of undefined
body: <p>I have two very similar React components making backend requests to Flask:</p>
  
  <hr>
  
  <p><strong>REACT</strong></p>
  
  <p><strong>UserStatus.jsx</strong></p>
  
  <pre><code>class UserStatus extends Component {
    constructor (props) {
      super(props);
      this.state = {
        user:'',      
        email: '',
        id: '',
        username: '',
        active: '',
        admin: ''    
      };
    };
    componentDidMount() {
      if (this.props.isAuthenticated) {
        this.getUserStatus();
      }
    };
    getUserStatus(event) {
      const options = {
        url: `${process.env.REACT_APP_WEB_SERVICE_URL}/auth/status`,
        method: 'get',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${window.localStorage.authToken}`
        }
      };
      return axios(options)
      .then((res) =&gt; { 
        console.log(res.data)  
        console.log(res.data.data) 
        this.setState({
          user: res.data.data.user,
          email: res.data.data.email,
          id: res.data.data.id,
          username: res.data.data.username,
          active: String(res.data.data.active),
          admin: String(res.data.data.admin),
        })
      })
      .catch((error) =&gt; { console.log(error); });
    };
    render() {
      if (!this.props.isAuthenticated) {
        return (
          &lt;p&gt;You must be logged in to view this. Click &lt;Link to="/login"&gt;here&lt;/Link&gt; to log back in.&lt;/p&gt;
        )
      };
      return (
        &lt;div&gt;
        &lt;h1 className="title is-1"&gt;&lt;font color="#C86428"&gt;Current User&lt;/font&gt;&lt;/h1&gt;
        &lt;hr/&gt;&lt;br/&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;strong&gt;&lt;font color="#C86428"&gt;User:&lt;/font&gt;&lt;/strong&gt;&lt;font color="white"&gt; {this.state.coffeeshop} &lt;/font&gt;&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;&lt;font color="#C86428"&gt;User ID:&lt;/font&gt;&lt;/strong&gt;&lt;font color="white"&gt; {this.state.id} &lt;/font&gt;&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;&lt;font color="#C86428"&gt;Email:&lt;/font&gt;&lt;/strong&gt;&lt;font color="white"&gt; {this.state.email} &lt;/font&gt;&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;&lt;font color="#C86428"&gt;Username:&lt;/font&gt;&lt;/strong&gt;&lt;font color="white"&gt; {this.state.username} &lt;/font&gt;&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;&lt;font color="#C86428"&gt;Active:&lt;/font&gt;&lt;/strong&gt;&lt;font color="white"&gt; {this.state.active} &lt;/font&gt;&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;&lt;font color="#C86428"&gt;Admin:&lt;/font&gt;&lt;/strong&gt;&lt;font color="white"&gt; {this.state.admin} &lt;/font&gt;&lt;/li&gt; 
        &lt;/ul&gt;
      &lt;/div&gt;
      )
    };
  };
  
  export default UserStatus;
  </code></pre>
  
  <p><strong>Seeds.jsx</strong></p>
  
  <pre><code>class Seeds extends Component{
    constructor (props) {
      super(props);
      this.state = {
        user:'',      
        email: '',
        id: '',
        username: '',
        active: '',
        admin: ''    
      };
    };
    componentDidMount() {
      if (this.props.isAuthenticated) {
        this.getUserStatus();
      }
    };
    getUserStatus(event) {
      const options = {
        url: `${process.env.REACT_APP_WEB_SERVICE_URL}/seeds`,
        method: 'get',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${window.localStorage.authToken}`
        }
      };
      return axios(options)
      .then((res) =&gt; {
      console.log(res.data)  
        console.log(res.data.data) 
        this.setState({
          user: res.data.data.user,
          email: res.data.data.email,
          id: res.data.data.id,
          username: res.data.data.username,
          active: String(res.data.data.active),
          admin: String(res.data.data.admin),
        })
      })
      .catch((error) =&gt; { console.log(error); });
    };
  
      render(){
          return (
              &lt;div className="form"&gt;
                  &lt;form action="http://localhost:5000/seeds" method="get, post"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Seeds;
  </code></pre>
  
  <p>But whereas <strong>UserStatus</strong> returns 'data' as an object:</p>
  
  <pre><code>{data: {…}, message: "success", status: "success"}
  </code></pre>
  
  <p><strong>Seeds</strong> returns 'data' as my template at backend, <code>seeds.html</code>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Brandio Coffee Browser&lt;/title&gt;
      &lt;link rel="stylesheet" href="/static/css/bootstrap.css"&gt;
      &lt;link rel="stylesheet" href="/static/css/mug.css"&gt;
  
      &lt;script src="/static/js/audiojs/audio.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        audiojs.events.ready(function() {
          var as = audiojs.createAll();
        });
      &lt;/script&gt;
      ....
  </code></pre>
  
  <p>and so I get the following error at rendering Seeds:</p>
  
  <pre><code>TypeError: Cannot read property 'user' of undefined
      at eval (Seeds.jsx:37)
  </code></pre>
  
  <hr>
  
  <p><strong>Flask</strong></p>
  
  <p><strong>seeds.py</strong></p>
  
  <pre><code>seeds_bp = Blueprint('seeds', 
                       __name__, 
                       template_folder='templates', 
                       static_url_path='static') 
  
  @seeds_bp.route('/seeds', methods=['GET', 'POST'])
  def seeds():    
      user = User.query.filter_by(id=1).first()
  
      if user.x == []:
          return render_template('seeds.html')
      else:
          # business logic
          return render_template('seeds.html')
  
  
      return render_template('seeds.html')
  </code></pre>
  
  <hr>
  
  <p>I kindly ask:</p>
  
  <p>1 - Why this difference in behaviour?</p>
  
  <p>2 - How do I properly render my <code>seeds.html</code> backend template page?</p>