Created
February 16, 2019 14:34
-
-
Save cctoni/a5209a6a59811585bf26af78ba224a8b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from "react"; | |
| import { Browser, Ghost } from "react-kawaii"; | |
| class Three extends Component { | |
| state = { | |
| type: "Browser", | |
| mood: "happy", | |
| color: "#61DDBC", | |
| visible: true | |
| }; | |
| swapKawaii = () => { | |
| this.setState({ | |
| type: "Ghost", | |
| mood: "blissful", | |
| color: "#E0E4E8", | |
| visible: false | |
| }); | |
| }; | |
| render() { | |
| return ( | |
| <div> | |
| <h2>Task No.3</h2> | |
| <h3>You see the Kawaii: {this.state.type}</h3> | |
| <p> | |
| On click we swap the KawaiiType to {this.state.type} and change color to {this.state.color} with a mood of{" "} | |
| {this.state.mood}. | |
| </p> | |
| <p> | |
| <button onClick={this.swapKawaii}>Call the Ghost!</button> | |
| </p> | |
| {this.state.visible ? ( | |
| <Browser size={200} mood={this.state.mood} color={this.state.color} /> | |
| ) : ( | |
| <Ghost size={200} mood={this.state.mood} color={this.state.color} /> | |
| )} | |
| </div> | |
| ); | |
| } | |
| } | |
| export default Three; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment