Passing onClick function as props to child component and using it to change parent component state

Question

I wrote a handle click function within my parent component (app.js) and passed it as props to the child component (video_list.js). Using the data within the child component and the onClick function, it would then update the parent state with a bit of the information it takes in via api.

Originally, I was getting the "cannot read property 'props' of null' error and followed the guidelines in this post --> Cannot read property 'props' of null - Reactjs. I have console.logged the props that video_list receives and it does get the "handlePick" function. However, when tested, it throws an error saying "TypeError: Cannot read property 'handlePick' of undefined". I've tried everything suggested in the aforementioned post and still get the same error.

Note: by updating the state on app.js with the information from video_list, it would then spawn "video_modal.js" with further details..

app.js...

import React, { Component } from 'react';

// MODULES

// COMPONENTS
import VideoList from './components/video_list/video_list';
import Dashboard from './components/dashboard/dashboard';
import Navbar from './components/navbar/navbar';
import SearchBar from './components/search_bar/search_bar';
import VideoModal from './components/video_detail/video_modal';

// REDUX
import { connect } from 'react-redux';
// import reducer from './reducers/reducer';

// CSS/Other Resources
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movieSelected: undefined,
    };

    // this.handlePick = this.handlePick.bind(this);
  }

  handleCloseDetail = () => {
    this.setState({ movieSelected: undefined });
  };

  handlePick = () => {
    this.setState({ movieSelected: this.movieData.imdbID });
  };

  // RENDER
  render() {
    return (
      <div className="body">
        <Navbar />
        <Dashboard />
        <SearchBar />
        {this.props.movie && <VideoList movieSelected={this.state.movieSelected} handlePick={this.handlePick} />}
        <VideoModal movieSelected={this.state.movieSelected} handleCloseDetail={this.handleCloseDetail} />
      </div>
    );
  }
}
// REDUX

function mapStateToProps(state) {
  return state;
}

// EXPORT

// export default App;

// REDUX EXPORT

export default connect(mapStateToProps)(App);

video_list.js...

import React, { Component } from 'react';
import Slider from 'react-slick';

// MODULES

// COMPONENTS

// REDUX
import { connect } from 'react-redux';

// CSS/Other Resources

class VideoList extends Component {
  constructor(props) {
    super(props);
    console.log(this.props.handlePick);
    this.handlePick = this.handlePick.bind(this);
  }

  handlePick() {
    this.props.handlePick();
  }

  renderMovies(movieData) {
    return (
      <div className="col-md-3" key={movieData.imdbID}>
        <div className="well text-center">
          <img src={movieData.Poster} alt="Card image cap" />
          <h5>
            {movieData.Title} ({movieData.Year})
          </h5>
          <br />
          {/* {console.log(this.handlePick)}; */}
          <button onClick={() => this.handlePick()} className="btn btn-primary">
            View Detail
          </button>
        </div>
      </div>
    );
  }

  render() {
    //console.log(this.props.movie[0]);
    return (
      <div className="container">
        <div className="row" id="movies">
          {this.props.movie.map(this.renderMovies)}
        </div>
      </div>
    );
  }
}

// REDUX

function mapStateToProps({ movie }) {
  //console.log(movie);
  //console.log(typeof movie);
  return { movie };
}
// EXPORT

// export default AllVideos;

// REDUX EXPORT

export default connect(mapStateToProps)(VideoList);

video_modal.js...

import React from 'react';
import Modal from 'react-modal';

const VideoModal = (props) => (
    <Modal
        isOpen={!!props.movieSelected}
        contentLabel="Movie Detail"    
    >
        <h3>Suspicio? Bene ... tunc ibimus? Quis uh ... CONEXUS locus his diebus? Quisque semper aliquid videtur, in volutpat mauris. Nolo enim dicere. Vobis neque ab aliis. Ego feci memetipsum explicans. Gus mortuus est. Lorem opus habeo. </h3>
    <button onClick={props.handleCloseDetail}>Close Detail</button>
    </Modal>
  );


export default VideoModal;

Thanks for the help!