1

I am new to React and trying to debug the following errors I am seeing.

Error #1: 

Uncaught TypeError: props.videos.map is not a function
at new VideoList

Error #2: 

bundle.js:19956 Error: findComponentRoot(..., .0.0.0): Unable to find element.
This probably means the DOM was unexpectedly mutated (e.g., by the browser), 
usually due to forgetting a <tbody> when using tables, nesting tags like 
<form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. 
Try inspecting the child nodes of the element with React ID ``.

Here is my code in reference to this file: 

import React from 'react';
import VideoListItem from './video_list_item';

const VideoList = (props) => {
  const videoItems = props.videos.map((video) => {
    return <VideoListItem key={video.etag} video={video} />
  });
  return (
    <ul className ="col-md-4 list-group">
    {videoItems}
    </ul>
  );
};

export default VideoList;

Index.js file: 

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search';
import SearchBar from './components/search_bar';
import VideoList from './components/video_list'
const API_KEY = '';



// create a new component.  This component should produce
// some HTML

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { videos: {} };

    YTSearch({key: API_KEY, term: 'React'}, (videos) => {
      this.setState({ videos });
    });
  }

  render() {
  return (

  <div>
  <SearchBar />
  <VideoList videos={this.state.videos} />
  </div>
);
}
}
// Take this component's generated HTML and put it
// on the page (in the DOM)

ReactDOM.render(<App />, document.querySelector('.container'));

I reviewed the following questions on SOF but neither could resolve my issue:

React JS - Uncaught TypeError: this.props.data.map is not a function

React.js this.props.data.map() is not a function

What I am having a hard time understanding is why it's giving me error #1 because I am using the function declaration with the 'fat arrows'. And I assume Error #2 is a result of Error #1.

What am I doing wrong?

Captain Kirk
  • 916
  • 2
  • 7
  • 15
  • 1
    Try logging `props.videos` and make sure it is an array, even an empty one. If it's not an array or undefined this error can happen. – Alexander Staroselsky Mar 25 '18 at 00:45
  • 1
    I was about to ask the propose the same thing :) – trinaldi Mar 25 '18 at 00:47
  • Hi @AlexanderStaroselsky! Thanks for the suggestion. I did try `console.log(props.videos);` just now but it didn't seem to return anything in the console. – Captain Kirk Mar 25 '18 at 00:49
  • 1
    Did you try it right before the `const videoItems ...` within the `VideoList` body? The goal is to see the structure and type of `props` or `props.videos`. You will likely get around this error by default videos to an empty array if no videos exist or similar. – Alexander Staroselsky Mar 25 '18 at 00:51
  • @AlexanderStaroselsky ah that was a mistake! I didn't do it before the constant. I just did it and it now returns the protocols but no error messages or anything I can use to debug it. I'll look more into the '_protos_'. – Captain Kirk Mar 25 '18 at 00:57
  • 1
    `map()` is an array function. It cannot be applied to an object. It looks like you are defaulting `videos` to an object rather than empty array `[]`. Does the data come in as an array? Or as an object in `YTSearch`? – Alexander Staroselsky Mar 25 '18 at 01:06
  • @AlexanderStaroselsky before when the code was working the results were returned as an array. – Captain Kirk Mar 25 '18 at 01:08

2 Answers2

2

Try setting videos default state to an empty array [] rather than object {}:

this.state = { videos: [] };

This error is happening because map() is an array method and is simply not available on objects.

Alexander Staroselsky
  • 37,209
  • 15
  • 79
  • 91
1

Try this method.

 const videoItems = props.videos && props.videos.map((video) => {
    return <VideoListItem key={video.etag} video={video} />
  });

Maybe props.video is undefined before it can render.

Omar
  • 3,401
  • 2
  • 23
  • 40