/*
1. break the UI into a component hierarchy
2. build a static version in React
3. identify the minimal (but complete) representation  of UI state
4. Identify where your state should live
5. Add inverse data flow

3. identify the minimal (but complete) representation of UI state


4. identify where your state should live
identifying which components own , ot mutates, the app's state

for each piece of state in your application:
1) identify every component that renders something based on that state
2) find a common owner component (a single component above all the components
that need that state in the hierarchy)
3) Either the common owner or another component higher up the in hierarchy should
own the state

5. Add inverse data flow
update the top level state-owner by passing funcs as props to its child components, and
appraise the child components of their values by passing in the top level state as a prop


the TodoList example, the component hierarchy would begin with:

* TodoApp
  * Title
  * ToDoList
  * InputForm
*/

const data = ["item one", "item two", "item three"]

class TodoApp extends React.Component {
  constructor(props) {
  super(props)
  this.state = { items: data }
  }

  render() {
    return(
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
      <form>
      <input  />
      <button >Enter item #{this.state.items.length + 1} </button>
      </form>
      </div>
    )
  }
}

class TodoList extends React.Component {
  render() {

    return(
      <ul>
      {
        this.props.items.map((item) => (
          <li>{item}</li>
        ))
      }
      </ul>
    )
  }
}