i had an app component


class App extends Component {
  initialState = "counter"
  router = createHandler(e => e.target.name)
  source($) {
    return this.router.$
  }
  render(state) {
    return <div className="container">
              <header>
                <ul className="nav">
                        <li>
                          <button name="counter" onClick={this.router}>Counter</button>
                        </li>
                        <li>
                          <button name="timer" onClick={this.router}>Timer</button>
                        </li>
                    </ul>
                    <h5>reactive-react</h5>
                    <p class="subtitle">{state}</p>
              </header>
              {/* <h2>This site is a starting point</h2>
              <p>From this point we should already have:</p> */}
              {/* <Counter name="Counter Count:"/>
              <Timer /> */}
            </div>
  }
}

and i wanted to pull out the navli’s to refactor for more concise code:

function NavLi({pageName, onClick}) {
  return <li>
        <button name={pageName} onClick={onClick}>{pageName}</button>
      </li>
}

but this caused an infinite loop for god knows what reason. so i abandoned the consiseness