README.md

Whack-A-Mole Game

You can whack a mole here.

Built in React.
Animation with Anime.js.
Illustration designed in Adobe Illustrator.
Created with the create-react-app npm module.
Hosted on Heroku.

Key learnings:

Calling functions in a component from a different component by passing onClick() in the props:
(I am not 100% sure yet that this is best practice)

App.js:

The timeOut function is defined in App.js.

<StartButton context={ this.state } onClick={ this.timeOut.bind(this) }/>

StartButton.js:

The timeOut function in App.js is called via the onClick on the component in StartButton.js

render(){
  return (
    <button className="game__start-button" type="button"
      onClick={ this.props.onClick } style={{ display: this.props.context.buttonDisplay }}>
      { this.props.context.buttonMessage }
    </button>
  )
};