CODEWITHSUNDEEP
reactjsmaterial-ui
Shinichi
Shinichi

Reputation: 95

Unable to use switch toggle for dark mode in material-ui

I have tried to include this code in my file for having a toggled dark mode for my react-website. But unfortunately, this code isn't working.I've tried to put the code inside the render function but it still shows this error. Can anybody please suggest a better way to put this code. enter image description here

import React ,{useState} from 'react';

import styles  from './App.module.css';

import titleImage from './images/image.png'; 
import { Paper ,Switch  } from '@material-ui/core';
import {ThemeProvider, createMuiTheme } from '@material-ui/core/styles';

class App extends React.Component{
    const [darkMode, lightMode] = useState (false);
    const theme = createMuiTheme ({
        palette:{
            type: darkMode ? "dark" : "light",
        },
    });
    render(){
        const { data ,country } = this.state;
        return(
            <ThemeProvider theme = {theme}>
                <Paper>
                    <div className={styles.container}  >
                        <img className={styles.image} src={titleImage} alt="COVID-19" />
                          <Switch checked ={darkMode} onChange = {() => setDarkMode(!darMode) }


                    </div>
                </Paper>
            </ThemeProvider> 
       )
    }
}

export default App;

{P.S. - I can't change the code which includes the render function as this is only the portion of the entire code. }

Upvotes: 1

Views: 2414

Answers (2)

rotimi-best
rotimi-best

Reputation: 1922

You are using a hook in a class component. You should only use hooks in a functional component like

import React, { useState } from 'react';
import { Paper, Switch  } from '@material-ui/core';
import {ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import styles  from './App.module.css';
import titleImage from './images/image.png';

const App = () => {
    const [data, setData] = useState ([]);
    const [country, setCountry] = useState ('');
    const [darkMode, setDarkMode] = useState (false);

    const theme = createMuiTheme ({
        palette:{
            type: darkMode ? "dark" : "light",
        },
    });

    const toggleDarkMode = () => setDarkMode(!darkMode);

    return(
        <ThemeProvider theme = {theme}>
            <Paper>
                <div className={styles.container}  >
                    <img className={styles.image} src={titleImage} alt="COVID-19" />
                    <Switch checked ={darkMode} onChange={toggleDarkMode} />
                </div>
            </Paper>
        </ThemeProvider> 
    )
}

export default App;

Upvotes: 1

Atin Singh
Atin Singh

Reputation: 3690

Your code throws parsing error because you cannot use react-hooks in class based components. Read more here why. Either change your component to functional component or use state object for your class component. Something like this -

import { ThemeProvider } from "@material-ui/styles";
import { createMuiTheme } from "@material-ui/core/styles";

class App extends React.Component{
    // const [darkMode, lightMode] = useState (false);
    state = {darkMode: false, data: '', country: ''};
    
    render(){
        const { data ,country, darkMode } = this.state;
        const theme = createMuiTheme ({
          palette:{
             type: darkMode ? "dark" : "light",
          },
        });
    
        return (
            <ThemeProvider theme = {theme}>
                <Paper>
                    <div className={styles.container}  >
                        <img className={styles.image} src={titleImage} alt="COVID-19" />
                          <Switch checked ={darkMode} onChange = {() => this.setState({darkMode: !darkMode}) }
                    </div>
                </Paper>
            </ThemeProvider>
        )
    }
}

Upvotes: 3

Related Questions