20-class-fields

Author: tylermcginnis

app/components/Battle.jsx

@@ -17,26 +17,19 @@ function Instructions() {
 }
 
 class PlayerInput extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      username: "",
-    };
-
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-  }
-  handleSubmit(event) {
+  state = {
+    username: "",
+  };
+  handleSubmit = (event) => {
     event.preventDefault();
 
     this.props.onSubmit(this.state.username);
-  }
-  handleChange(event) {
+  };
+  handleChange = (event) => {
     this.setState({
       username: event.target.value,
     });
-  }
+  };
   render() {
     return (
       <form className="card" onSubmit={this.handleSubmit}>
@@ -97,27 +90,20 @@ PlayerPreview.propTypes = {
 };
 
 export default class Battle extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      playerOne: null,
-      playerTwo: null,
-    };
-
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleReset = this.handleReset.bind(this);
-  }
-  handleSubmit(id, player) {
+  state = {
+    playerOne: null,
+    playerTwo: null,
+  };
+  handleSubmit = (id, player) => {
     this.setState({
       [id]: player,
     });
-  }
-  handleReset(id) {
+  };
+  handleReset = (id) => {
     this.setState({
       [id]: null,
     });
-  }
+  };
   render() {
     const { playerOne, playerTwo } = this.state;
     const disabled = !playerOne || !playerTwo;

app/components/Hover.jsx

@@ -1,22 +1,15 @@
 import * as React from "react";
 
 export default class Hover extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      hovering: false,
-    };
-
-    this.mouseOver = this.mouseOver.bind(this);
-    this.mouseOut = this.mouseOut.bind(this);
-  }
-  mouseOver() {
+  state = {
+    hovering: false,
+  };
+  mouseOver = () => {
     this.setState({ hovering: true });
-  }
-  mouseOut() {
+  };
+  mouseOut = () => {
     this.setState({ hovering: false });
-  }
+  };
   render() {
     return (
       <div onMouseOver={this.mouseOver} onMouseOut={this.mouseOut}>

app/components/Loading.jsx

@@ -11,13 +11,9 @@ const styles = {
 };
 
 class Delayed extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      show: false,
-    };
-  }
+  state = {
+    show: false,
+  };
   componentDidMount() {
     this.timeout = window.setTimeout(() => {
       this.setState({ show: true });
@@ -41,13 +37,9 @@ Delayed.propTypes = {
 };
 
 export default class Loading extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      content: props.text,
-    };
-  }
+  state = {
+    content: this.props.text,
+  };
   componentDidMount() {
     const { speed, text } = this.props;
 

app/components/Popular.jsx

@@ -26,21 +26,15 @@ LanguagesNav.propTypes = {
 };
 
 export default class Popular extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      selectedLanguage: "All",
-      repos: null,
-      error: null,
-    };
-
-    this.updateLanguage = this.updateLanguage.bind(this);
-  }
+  state = {
+    selectedLanguage: "All",
+    repos: null,
+    error: null,
+  };
   componentDidMount() {
     this.updateLanguage(this.state.selectedLanguage);
   }
-  updateLanguage(selectedLanguage) {
+  updateLanguage = (selectedLanguage) => {
     this.setState({
       selectedLanguage,
       error: null,
@@ -60,7 +54,7 @@ export default class Popular extends React.Component {
           error: `There was an error fetching the repositories`,
         });
       });
-  }
+  };
   render() {
     const { selectedLanguage, repos, error } = this.state;
 

app/components/Results.jsx

@@ -67,16 +67,12 @@ Card.propTypes = {
 };
 
 class Results extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      winner: null,
-      loser: null,
-      error: null,
-      loading: true,
-    };
-  }
+  state = {
+    winner: null,
+    loser: null,
+    error: null,
+    loading: true,
+  };
   componentDidMount() {
     const sp = this.props.router.searchParams;
     const playerOne = sp.get("playerOne");

app/index.jsx

@@ -8,20 +8,14 @@ import Nav from "./components/Nav";
 import Results from "./components/Results";
 
 class App extends React.Component {
-  constructor(prop) {
-    super(prop);
-
-    this.state = {
-      theme: "light",
-    };
-
-    this.toggleTheme = this.toggleTheme.bind(this);
-  }
-  toggleTheme() {
+  state = {
+    theme: "light",
+  };
+  toggleTheme = () => {
     this.setState(({ theme }) => ({
       theme: theme === "light" ? "dark" : "light",
     }));
-  }
+  };
   render() {
     return (
       <Router>