React Remove Options From List - Pass function two levels

remove_options.js

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class IndecisionApp extends React.Component {

  constructor(props) {
    super(props);
    this.handleDeleteOptions = this.handleDeleteOptions.bind(this);
    this.handlePick = this.handlePick.bind(this);
    this.handleAddOption = this.handleAddOption.bind(this);
    this.handleDeleteOption = this.handleDeleteOption.bind(this);
    this.state = {
      options: ["one", "two"]
    }
  }

  handleDeleteOptions() {
    this.setState({
        options: []
      });
  }

  handleAddOption(option) {
    this.setState((prevState) => {
      return {
        options: prevState.options.concat([option])
      }
    });
  }

  handlePick() {
    const randomNum = Math.floor(Math.random() * this.state.options.length);
    const option = this.state.options[randomNum];
    alert(option);
  }

  handleDeleteOption(option) {
    this.setState((prevState) => ({
      options: prevState.options.filter(opt => opt !== option)
    })); // filter returns new array
  }
  
  render() {
    return (
      <div>
        <Header />
        <Action 
          hasOptions={this.state.options.length > 0} 
          handlePick={this.handlePick}
        />
        <Options
          handleDeleteOption={this.handleDeleteOption} 
          handleDeleteOptions={this.handleDeleteOptions} 
          options={this.state.options} 
        />
        <AddOption 
          handleAddOption={this.handleAddOption}
        />
      </div>
    )
  }
}

// stateless functional
const Header = (props) => {
  return (
    <p>Header: {props.title}</p>
  );
}

Header.defaultProps = {
  title: 'some default'
}

class Action extends React.Component {
  render() {
    return <button disabled={!this.props.hasOptions} onClick={this.props.handlePick}>What should I do?</button>;
  }
}

class Option extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.option}</p>
        <button onClick={(e) => {
          this.props.handleDeleteOption(this.props.option);
        }}>Remove</button>
      </div>
    );
  }
}

class Options extends React.Component {
  
  render() {
    return (
      <div>
        <button onClick={this.props.handleDeleteOptions}>Remove All</button>
        Options component here
        {
          this.props.options && this.props.options.map((option) => (
            <Option
              key={option}
              option={option}
              handleDeleteOption={this.props.handleDeleteOption}
            />
          ))
        }
      </div>
    );
  }
}

class AddOption extends React.Component {
  constructor (props) {
    super(props);
    this.handleAddOption = this.handleAddOption.bind(this);
  }
   handleAddOption(e) {
     e.preventDefault();

     const option = e.target.elements.option.value.trim();

     if(option) {
       this.props.handleAddOption(option);
     }
   }

  render() {
    return (
      <div>
        <form onSubmit={this.handleAddOption}>
          <input type="text" name="option" />
          <input type="submit" value="Submit"/>
        </form>
      </div>
    );
  }
}

ReactDOM.render(<IndecisionApp/>, document.getElementById('root'));

Online React Sandbox: https://codesandbox.io/s/new