Resolved: How can I pass on an on click event to a component via props?

In this post, we will see how to resolve How can I pass on an on click event to a component via props?

Question:

I have a floating action button that I want to use to enable night mode but I have gotten stuck on how to pass the on the click event so that the mode actives. I am unsure of what I am doing wrong can someone give me some guidance?
I was trying to follow this guide. https://www.makeuseof.com/how-to-add-dark-mode-to-a-react-application/ So far

class FloatingActionButton extends React.Component {


    constructor(props) {
    
        super(props);
const [theme, setTheme] = useState(
    localStorage.getItem('theme') || 'light'
  );
  const toggleTheme = () => {
    if (theme === 'light') {
      setTheme('dark');
    } else {
      setTheme('light');
    }
  };

   }
   useEffect(() => {
     localStorage.setItem('theme', theme);
     document.body.className = theme;
   }, [theme]);

config({
        
            floatingActionButtonConfig: {
                icon: 'runner',
                closeIcon: 'icon ion-md-close',
                position: {
                    my: 'right bottom',
                    at: 'right bottom',
                    offset: '-16 -16'
                }
         
  
         
            }
        });

        
    }

    render() {


        return (
            <div id="app-container" className={`App ${theme}`}>

                <SpeedDialAction
                    hint="Increase Font"
                    icon="growfont"
                    onClick={() =>
                        alert("Increase Font Clicked!!")
                    }
                />
                <SpeedDialAction
                    hint="turn on night mode"
                    icon="night mode"
                    onClick={() => toggleTheme}
                />
      
        );
    }
}


export default FloatingActionButton;

tried to pass in the toggle theme into the on click listener and reference it in the function earlier in the code but it is not working properly, any guidance on how to improve will be appreicated. I am geting a theme and toggle not defined but I am unsure why as they are being initalized properly.
Would using context be better?
After updating the code to what was provided to me below minus the effect the page loads properly but I am unable to get on click to engage darkmode
I added this to the button and found no change

           <SpeedDialAction
                  hint="turn on night mode"
                  icon="night mode"
                  onClick={() => this.toggleTheme(
(this.state.theme == 'dark')
                  )}
              />

Best Answer:

useState can only be used in a functional component. If you are going to use a class component, you need to assign to this.state in the constructor, and this.setState to update the state. Your code should look something like this:

class FloatingActionButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            theme: localStorage.getItem('theme') || 'light'
        };
        config({
            floatingActionButtonConfig: {
                icon: 'runner',
                closeIcon: 'icon ion-md-close',
                position: {
                    my: 'right bottom',
                    at: 'right bottom',
                    offset: '-16 -16'
                }
            }
        });
    }
    toggleTheme(){
        if(this.state.theme == 'light'){
           this.setState({theme: 'dark'});
        } else {
           this.setState({theme: 'light'});
        }
    }

    render() {


        return (
            <div id="app-container" className={`App ${this.state.theme}`}>

                <SpeedDialAction
                    hint="Increase Font"
                    icon="growfont"
                    onClick={() =>
                        alert("Increase Font Clicked!!")
                    }
                />
                <SpeedDialAction
                    hint="turn on night mode"
                    icon="night mode"
                    onClick={() => this.toggleTheme()}
                />
      
        );
    }
}

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com

Question:

Best Answer:

Related