React 中的切换按钮不切换

Question

I am working on a react app that has a toggle button. I have a component that contains the the basic outline of the toggle button. I can make the toggle button work in regular HTML with CSS. I am trying to do the same thing in my react. Create a toggle button with jsx and css.

Is this possible? If not should use a useState hook, how can I set that up.

Component

ToggleBtn.js

const ToggleBtn = () => {
    return ( 
        <div class="space-around">
        <h3 className="h3">Annually</h3>
        <label className="switch">
            <input type="checkbox" checked/>
            <span className="slider"></span>
        </label>
        <h3 className="h3">Monthly</h3>
        </div>
     );
}

app.css

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 0 10px;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}
.switch input {
  display: none;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: -20px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50px;
}
input:checked + .slider {
  background-color: var(--Purplish);
}
input:checked + .slider:before {
  transform: translateX(50px);
}

Answer 1

I was able to get this to work. I created the component (toggle button) in its own file with a CSS file to style it on its own and made it work.

This is the code used.

Switch.js

import React from 'react'; import "./Switch.css";

const Switch = () => {
    return ( 
        <label className="switch1">
        <input type="checkbox"/>
        <span className="slider1"/>
        </label>
     );
}
 
export default Switch ;

Switch.css

.switch1 {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch1 input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider1 {
  position: absolute;
  cursor: pointer;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 50px;
}

.slider1::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  bottom: 4px;
  left: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50px;
}
input:checked + .slider1::before {
  transform: translateX(26px);
}

input:checked + .slider1 {
  background-color: #2196f3;
}

I then imported the component in my original toggle file.

import Switch from "./components/Switch";

const ToggleBtn = () => {
    return ( 
        <div class="space-around">
        <h3 className="h3">Annually</h3>
        <Switch />
        <h3 className="h3">Monthly</h3>
        </div>
     );
}
 
export default ToggleBtn;