React child callback not being executed after being passed down twice

user_3282434 0
Viewed 22

I am working on the following project https://github.com/codyc4321/react-udemy-course section 11 the videos app. The udemy course is found at https://www.udemy.com/course/react-redux/learn/lecture/12531374#overview.

The instructor is passing a callback down to multiple children and calling it in the lowest videoItem and the code is supposed to console log something out. I have no console log in my browser even though I've copied the code as written and double checked for spelling errors.

At the main level is App.js:

import React from 'react';

import youtube from '../apis/youtube';
import SearchBar from './SearchBar';
import VideoList from './VideoList';



class App extends React.Component {

  state = {videos: [], selectedVideo: null};

  onTermSubmit = async term => {
    const response = await youtube.get('/search', {
      params: {
        q: term
      }
    });

    // console.log(response.data.items);

    this.setState({videos: response.data.items});
  };

  onVideoSelect = video => {
    console.log('from the app', video);
  }

  render() {
    return (
      <div className="ui container">
        <SearchBar onFormSubmit={this.onTermSubmit} />
        <VideoList
          onVideoSelect={this.onVideoSelect}
          videos={this.state.videos} />
      </div>
    )
  }
}


export default App;

videoList.js

import React from 'react';
import VideoItem from './VideoItem';


const VideoList = ({videos, onVideoSelect}) => {
  const rendered_list = videos.map(video => {
    return <VideoItem onVideoSelect={onVideoSelect} video={video} />
  });

  return <div className="ui relaxed divided list">{rendered_list}</div>;
};

export default VideoList;

the videoItem.js

import React from 'react';

import './VideoItem.css';


const VideoItem = ({video, onVideoSelect}) => {
  return (
    <div onClick={() => onVideoSelect(video)} className="item video-item">
      <img
        src={video.snippet.thumbnails.medium.url}
        className="ui image"
      />
      <div className="content">
        <div className="header">{video.snippet.title}</div>
      </div>
    </div>
  );
}


export default VideoItem;

The code that isn't running is

onVideoSelect = video => {
    console.log('from the app', video);
  }

enter image description here

reactjs javascript
1 Answers

My guess is that it has something to do with a key prop not being present in the map - I'm not super well versed with class components but I can't find anything else funky so maybe try adding a unique key prop in the map.

When rendering components through a map react needs help with assigning unique identifiers to keep track of re-renders etc for performance, that also applies to knowing which specific instance called a class method.

If you don't have a unique ID in the video prop you can use an index in a pinch, although ill advised, it can be found as the second parameter in the map function. The reason it's ill advised to use an index is if there are multiple children with the same index in the same rendering context, obviously the key parameter could be confused.

Okay-ish:

  const rendered_list = videos.map((video, index) => {
return <VideoItem key={index} onVideoSelect={onVideoSelect} video={video} />});

Better:

  const rendered_list = videos.map((video, index) => {
return <VideoItem key={video.id} onVideoSelect={onVideoSelect} video={video} />});
user_114514200
Related