get state data from dropdown component

Question

New to react and have a drop down component, i.e. below, where, upon selection I am getting a value I need to process (i.e. id).

import React, { Component } from 'react';

    class DropDown extends Component {
      state = {
        //value: this.props
        value: id
      };
      handleChange = event => {
        const { value } = event.target;
        this.setState({ value });
    
        let id = event.target.parentElement.id;
        console.log(id);
      };
      render() {
        return (
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="move" disabled>
              Move to:
            </option>
            <option value="currentlyReading">Currently Reading</option>
            <option value="wantToRead">Want to Read</option>
            <option value="read">Read</option>
            <option value="none">None</option>
          </select>
        );
      }
    };
    
    export default DropDown;

Here is /app.js where I am trying to receive the dropdown selection value of id. How can I pass/receive the data in the below component?

import React, { Component } from 'react';
import DropDown from './comps/Dropdown';
import * as BooksAPI from './data/BooksAPI';

class BooksApp extends Component {

  state = {
    currentlyReading: [],
    wantToRead: [],
    read: [],
    search: [],
    reset: [],
    error: false
  };

  componentDidMount = () => {
    BooksAPI.getAll()
      .then(books => {
        this.setState({ wantToRead: books });
        console.log(this.state.wantToRead)
      })
      .catch(err => {
        this.setState({ error: true });
      });
  };

  render() {
    return (
    <div>
      <div className="currentlyReading shelf"><h2>Currently</h2>
        {this.state.currentlyReading.map((reading, i) => (
          <div className="item" id={reading.title}>
            <img src={reading.imageLinks&&reading.imageLinks.smallThumbnail} alt="img"/>
            {reading.title}<br></br>
            {reading.publisher}
            <img src='\icons\arrow-drop-down.svg' className='toggle'/>
            <DropDown/>
          </div>
          ))}
      </div>
      <div className="wantToRead shelf"><h2>Want To</h2>
          {this.state.wantToRead.map((wishList, i) => (
            <div className="item" id={wishList.title}>
            <img src={wishList.imageLinks&&wishList.imageLinks.smallThumbnail} alt="img"/>
            {wishList.title} <br></br>
            {wishList.publisher}
            <img src='\icons\arrow-drop-down.svg' className='toggle'/>
            <DropDown/>
          </div>
          ))}
      </div>
      <div className="read shelf"><h2>Read</h2>
        {this.state.read.map((finished, i) => (
            <div className="item" id={finished.title}>
            <img src={finished.imageLinks&&finished.imageLinks.smallThumbnail} alt="img"/>
            {finished.title}<br></br>
            {finished.publisher}
            <img src='\icons\arrow-drop-down.svg' className='toggle'/>
            <DropDown/>
          </div>
          ))}
      </div>
    </div>);
  }
}

export default BooksApp;

Answer 1

You can pass handleChange function as props to the child element like

<DropDown handleChange={this.handleChange}/>

and can declare the handleChange in the parent component.

You can also refer to https://codesandbox.io/s/jovial-merkle-tq0u5?file=/src/App.js