ReactJS based app using states and props to decide between list of items.

React Indecision App

import React, { Component } from "react";
import "./App.css";
const style = { width: "1000px", margin: "20px auto" };

class Header extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <h4>{this.props.subtitle}</h4>
      </div>
    );
  }
}

class Options extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.handleRemoveAll}>Remove All</button>
        {this.props.options.map(option => (
          <Option key={option} optionText={option} />
        ))}
      </div>
    );
  }
}

class Option extends Component {
  render() {
    return (
      <div>
        <li>{this.props.optionText}</li>
      </div>
    );
  }
}

class Action extends Component {
  render() {
    return (
      <div>
        <button
          onClick={this.props.handleDecision}
          disabled={this.props.hasOption}
        >
          What should I do?
        </button>
      </div>
    );
  }
}

class AddOption extends 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);
      e.target.elements.option.value = "";
    }
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleAddOption}>
          <input type="text" name="option" />
          &nbsp;
          <button>Add Option</button>
        </form>
      </div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: []
    };
    this.handleRemoveAll = this.handleRemoveAll.bind(this);
    this.hanldeDecision = this.hanldeDecision.bind(this);
    this.handleAddOption = this.handleAddOption.bind(this);
  }

  handleRemoveAll() {
    this.setState(() => {
      return {
        options: []
      };
    });
  }

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

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

  render() {
    const title = "Indecision App";
    const subtitle = "Put your life in the hand of computers.";
    return (
      <div style={style}>
        <Header title={title} subtitle={subtitle} />
        <Action
          hasOption={!this.state.options.length > 0}
          handleDecision={this.hanldeDecision}
        />
        <Options
          options={this.state.options}
          handleRemoveAll={this.handleRemoveAll}
        />
        <hr />

        <AddOption handleAddOption={this.handleAddOption} />
      </div>
    );
  }
}

export default App;