Alternating between 2 states (numbers) using React.useState hooks

Question

I'm trying to figure out the logic using React.useState hooks. Basically I want to alternate the "volume" option under the "PlayOn" object's state from 0 to 0.75. I'm by no means a react expert.

I just need the logic of the function to put in soundChange to alternate between the two states: 0, which is the default initial state in which the switch component has not been pressed; 0.75 which is its final state in which the switch component has been pressed, and back to 0 again when the switch gets pressed again. I hope you guys could help me out.

        import React from 'react';
        import { makeStyles } from '@material-ui/core/styles';
        import Switch from '@material-ui/core/Switch';
        import Fade from '@material-ui/core/Fade';
        import FormControlLabel from '@material-ui/core/FormControlLabel';
        import Typography from '@material-ui/core/Typography';
        import Paper from '@material-ui/core/Paper';
        import useSound from 'use-sound';
        import Rick from './sounds/rick_astley.mp3';
    
    function Myswitch() {
        const classes = useStyles();
        const [checked, setChecked] = React.useState(false);
        const [withSound, setSound] = React.useState(0);
        const [playOn] = useSound(Rick, {
            volume: withSound,
            interrupt: true,
            soundEnabled: true,
        });
        const soundChange = () => {
            setSound(/*LOGIC HERE TO ALTERNATE BETWEEN 0 and 0.75 states*/);
        };
    const handleChange = () => {
        setChecked((prev) => !prev);
    };
return (
        <div className={classes.root}>
            <FormControlLabel
                control={
                    <Switch
                        checked={checked}
                        onChange={handleChange}
                        onMouseDown={soundChange}
                    />
                }
                label={
                    <Typography variant='h5' color='secondary'>
                        'DO NOT click!'
                    </Typography>
                }
            />
            <div className={classes.container}>
                <Fade in={checked}>
                    <Paper elevation={1} className={classes.paper}>
                        <img
                            src={
                                'https://media.tenor.com/images/f0e22aca6a9498ce63497ca56fb49602/tenor.gif'
                            }
                            alt='Never gonna give you up'
                        />
                        <Typography variant='h5' color='secondary'>
                            You had to click it XD
                        </Typography>
                    </Paper>
                </Fade>
            </div>
        </div>
    );
}

export default Myswitch;

Answer 1

As far as I understand your question you want to toggle between states. What you can do is that have a state variable containing initial and final states and then toggle using if...else in the soundChange() function shown below.

Online IDE Link : Live Demo Here

Code Snippet

import React, { useState } from "react";

export default function App() {

   const [states] = useState({
     initial: 'initial',
     initialState: 0,
     final: 'final',
     finalState: 0.75
   })

  const [withSound, setSound] = useState(states.initialState);

  const [current, setCurrent] = useState(states.initial);

  const soundChange = () => {
   if (withSound === states.initialState) {
     setSound(states.finalState)
     setCurrent(states.final)
   } else {
     setSound(states.initialState)
     setCurrent(states.initial)
   }
  }

  return (
    <div>
      <button onClick={() => soundChange()}>Play {withSound} </button>
      <div> { current } </div>
    </div>
  )
}

This will surely give you an idea about how to approach the problem.

Answer 2

First do this:

const soundChange = () => {
        setSound(!withSound);
    };

Then

[playOn] =useSound(Rick, {
            volume: withSound ? 0.75 : 0,
            interrupt: true,
            soundEnabled: true,
        });

So in your desired event calls, call playOn()

Answer 3

First set your withSound to null by default

 const [withSound, setSound] = React.useState(null);

Then implement your your function as

 const soundChange = () => {
            setSound(!withSound);
        };