Code for 2-index

Author: tylermcginnis

app/components/Battle.js

@@ -8,7 +8,7 @@ import { Link } from 'react-router-dom'
 function Instructions () {
   return (
     <ThemeConsumer>
-      {({ theme }) => (
+      {(theme) => (
         <div className='instructions-container'>
           <h1 className='center-text header-lg'>
             Instructions
@@ -50,7 +50,7 @@ class PlayerInput extends React.Component {
   render() {
     return (
       <ThemeConsumer>
-        {({ theme }) => (
+        {(theme) => (
           <form className='column player' onSubmit={this.handleSubmit}>
             <label htmlFor='username' className='player-label'>
               {this.props.label}
@@ -88,7 +88,7 @@ PlayerInput.propTypes = {
 function PlayerPreview ({ username, onReset, label }) {
   return (
     <ThemeConsumer>
-      {({ theme }) => (
+      {(theme) => (
         <div className='column player'>
           <h3 className='player-label'>{label}</h3>
           <div className={`row bg-${theme}`}>

app/components/Card.js

@@ -5,7 +5,7 @@ import { ThemeConsumer } from '../contexts/theme'
 export default function Card ({ header, subheader, avatar, href, name, children }) {
   return (
     <ThemeConsumer>
-      {({ theme }) => (
+      {(theme) => (
         <div className={`card bg-${theme}`}>
           <h4 className='header-lg center-text'>
             {header}

app/components/Nav.js

@@ -6,10 +6,10 @@ const activeStyle = {
   color: 'rgb(187, 46, 31)'
 }
 
-export default function Nav () {
+export default function Nav ({ toggleTheme }) {
   return (
     <ThemeConsumer>
-      {({ theme, toggleTheme }) => (
+      {(theme) => (
         <nav className='row space-between'>
           <ul className='row nav'>
             <li>

app/index.js

@@ -10,37 +10,30 @@ const Popular = React.lazy(() => import('./components/Popular'))
 const Battle = React.lazy(() => import('./components/Battle'))
 const Results = React.lazy(() => import('./components/Results'))
 
-class App extends React.Component {
-  state = {
-    theme: 'light',
-    toggleTheme: () => {
-      this.setState(({ theme }) => ({
-        theme: theme === 'light' ? 'dark' : 'light'
-      }))
-    }
-  }
-  render() {
-    return (
-      <Router>
-        <ThemeProvider value={this.state}>
-          <div className={this.state.theme}>
-            <div className='container'>
-              <Nav />
+function App () {
+  const [theme, setTheme] = React.useState('light')
+  const toggleTheme = () => setTheme((theme) => theme === 'light' ? 'dark' : 'light')
 
-              <React.Suspense fallback={<Loading />} >
-                <Switch>
-                  <Route exact path='/' component={Popular} />
-                  <Route exact path='/battle' component={Battle} />
-                  <Route path='/battle/results' component={Results} />
-                  <Route render={() => <h1>404</h1>} />
-                </Switch>
-              </React.Suspense>
-            </div>
+  return (
+    <Router>
+      <ThemeProvider value={theme}>
+        <div className={theme}>
+          <div className='container'>
+            <Nav toggleTheme={toggleTheme} />
+
+            <React.Suspense fallback={<Loading />} >
+              <Switch>
+                <Route exact path='/' component={Popular} />
+                <Route exact path='/battle' component={Battle} />
+                <Route path='/battle/results' component={Results} />
+                <Route render={() => <h1>404</h1>} />
+              </Switch>
+            </React.Suspense>
           </div>
-        </ThemeProvider>
-      </Router>
-    )
-  }
+        </div>
+      </ThemeProvider>
+    </Router>
+  )
 }
 
 ReactDOM.render(