Vimeo Channel and Videos not showing

Question

I'm working with Vimeo API to access a channel using axios and react. I have the code set up correctly, but I am getting this error after I compile:

TypeError: Cannot read property 'map' of undefined

regarding this particular line: {this.state.videos.map(video =>

Here is the entire piece of code for reference:

import React, { Component } from 'react';
import axios from 'axios';

class Apicall extends Component {

  componentWillMount() {
    this.getChannel();
  }


  getChannel() {
    axios.get(`https://api.vimeo.com/channels/collegehumorbackstage/page:1`)
      .then(res => {
        const videos = res.data.data.children.map(obj => obj.data);
        this.setState({videos});
      });
  }

  constructor(props) {
    super(props);

    this.state = {
      channel_id: 'collegehumorbackstage',
      data: [],
      per_page: '5',
      paging: {
        first: '/channels/collegehumorbackstage/videos?page=1',
        last: '/channels/collegehumorbackstage/videos?page=2'
      }
    }
    this.getChannel = this.getChannel.bind(this);

  }


  render() {
    return (
      <div className="container">
        <ul>
          {this.state.videos.map(video =>
            <li key={video.uri}></li>
          )}
        </ul>
      </div>
    );
  }
}

export default Apicall;

As far as I know everything else is fine, also a 2nd pair of eyes always helps. Am I missing something?

Answer 1

That is because initially you don't have videos in your state. So it is undefined.

You should provide default value for it, for example an empty array:

this.state = {
   channel_id: 'collegehumorbackstage',
   data: [],
   per_page: '5',
   paging: {
      first: '/channels/collegehumorbackstage/videos?page=1',
      last: '/channels/collegehumorbackstage/videos?page=2' 
   },
   videos: [],
}