How to communicate between two components in Reactjs

I'm a newbie in React. Why can't my data pass to another component?? My idea is after the user select option tag, then it will load some audio files based off the selection. But it's not working. What did I miss?

Or is there a better to do it?

This is my dropdown component

import React from 'react';
import Playlist from './Playlist/Playlist.js';

class Dropdown extends React.Component {
  constructor (props) {
    super(props);
    this.state = {value: "1"};

    this.handleChange = this.handleChange.bind(this);
    this.handleEnter = this.handleEnter.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});

    console.log("Hello");
    console.log(event.target.value);
    console.log(typeof(event.target.value));
  }

  handleEnter(event) {

    alert("Clicked: " + this.state.value);
    event.preventDefault();
  }

  render (){
    return (
      <form onSubmit={this.handleEnter} >
        <label>
        <div className="langueageSelection">
          <Playlist langueageSelection={this.handleChange.bind(this)} />

          <select value={this.state.value} onChange={this.handleChange} >

            <option value=""> Please select a language </option>
            <option value="1"> English (American) </option>
            <option value="2"> Chinese (Mandarin) </option>
          </select>

      </div>
    </label>
    <input type="submit" value="Enter" className="EnterButton"/>
  </form>
);
}
}

export default Dropdown;

This is my playlist component.

import React from 'react';
class Playlist extends React.Component {

  handleChange({target}){
    this.props.langueageSelection(target.value)
  }

  render() {
    if (this.props.langueageSelection === "1"){
      console.log("English");

    }
    else if(this.props.langueageSelection === "2"){
      console.log("Chinese");
    }
    return (
      <div> Hi</div>
     );
 }
}

export default Playlist;

This is my entry component:

import React from 'react';
import mind_zebra from '../../images/MindScribe-zebra.png';
import Dropdown from '../Dropdown/Dropdown.js';


class Entry extends React.Component {

  state = { hideZebraPic : false};

  onClickHandler = () => {
    this.setState( prev => ({ hideZebraPic : !prev.hideZebraPic }));
  };

  render() {
    if (this.state.hideZebraPic) {
      return (
        <div>
          <Dropdown />
        </div>
      );
    } else {
      return (
        <div>
          <img src={mind_zebra} onClick={this.onClickHandler} className="MindZebraPic" alt="zebra"/>
        </div>
      );
    }
  }
}

Here's my structure of directory:

src
  |
  audio
    - English audios
    - Chinese audios
  components
     |
     Dropdown
        |
        playlist
          - playlist.js
        dropdown.js
     |
     Entry
         |
         entry.js
     |
     Home
         |
         App.js