Skip to content
Whack-a-mole game built with React
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
README.md
package.json

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>
  )
};
You can’t perform that action at this time.