React input checkbox checked

Question

I have use React-redux and styled components for my app. I store my initial state theme as a string which is light and dark. then I connect my styled components intial light theme and dark theme in my root app. My dark mood works fine when i used select options but when i used input checkbox it does not work. I never used input checkbox, after reading couple example I used checked and put my initial theme(which is coming from my redux store), then in my handleChange I did, if the event target has dark then dispatch the dark theme. But nothing happening in that handle change. don't know what i am doing wrong.

Here is my toggle component

import React, { useState } from 'react';
import styled from 'styled-components';
import { useDispatch, useSelector } from 'react-redux';
import { appSettings } from '../../state/appSettings';
import { TRootState } from '../../state/index';

export default function Toggle({ }: IProp) {
  const dispatch = useDispatch();
  const { "appSettings": appSettingState } = useSelector((state: TRootState) => state);
  const { theme } = appSettingState || {};
  console.log(theme); // inital state which is "light". 

  return (
    <>
      {/*  This input checkbox  does not work */}
      <CheckBoxWrapper>
        <CheckBox
          onChange={(e) => { // This function does not work
            e.target.value === `dark` ?
              dispatch(appSettings?.actions?.enableDarkTheme()) :
              dispatch(appSettings?.actions?.enableLightTheme());
          }}
          id="toggleSwitch"
          type="checkbox"
          Checked={theme === `light`}
        />
        <CheckBoxLabel htmlFor="toggleSwitch" />
      </CheckBoxWrapper>
      <br></br>

      {/*  THIS SELECT OPTIONS WORK FINE. AND I CAN GET DARK AND LIGHT THEME */}
      <h2>Theme</h2>
      <select
        name="theme"
        id="theme-select"
        value={theme}
        onChange={(e) => {
          if (e.target.value === `dark`) {
            dispatch(appSettings?.actions?.enableDarkTheme());
          } else {
            dispatch(appSettings?.actions?.enableLightTheme());
          }
        }}
      >
        <option value="dark">Dark</option>
        <option value="light">Light</option>
      </select>
    </>
  );
}

// This toogle input styled
const CheckBoxWrapper = styled.div`
position: fixed;
top:10px;
right:10px;
`;

const CheckBoxLabel = styled.label`
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 26px;
  border-radius: 15px;
  background: #bebebe;
  cursor: pointer;
  &::after {
    content: "";
    display: block;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    margin: 3px;
    background: #ffffff;
    box-shadow: 1px 3px 3px 1px rgba(0, 0, 0, 0.2);
    transition: 0.2s;
  }
`;
const CheckBox = styled.input`
  opacity: 0;
  z-index: 1;
  border-radius: 15px;
  width: 42px;
  height: 26px;
  &:checked + ${CheckBoxLabel} {
    background: #4fbe79;
    &::after {
      content: "";
      display: block;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      margin-left: 21px;
      transition: 0.2s;
    }
  }
`;

A checkbox change event typically has a checked property instead of a value property. Also, I think this may be a typo, but should Checked={theme === 'light'} be checked={theme === 'light'}, i.e. a lowercase checked prop? — Drew Reese
– Drew Reese, Commented Sep 25, 2020 at 5:54
when i did checked my toggle bar became froze. It does not move — Krisna
– Krisna, Commented Sep 25, 2020 at 5:58
Right, because that'll override any toggling of the checked state. In cases with uncontrolled inputs you will rather use the defaultChecked (or defaultValue) prop instead. — Drew Reese
– Drew Reese, Commented Sep 25, 2020 at 6:02
codesandbox.io/s/theme-xd301?file=/src/App.tsx the right corner toggle and console log then you will see it always shows light — Krisna
– Krisna, Commented Sep 25, 2020 at 6:04

Drew Reese · Accepted Answer · 2020-09-25 06:09:08Z

4

Check the change event's checked property. e.target.checked

<CheckBox
  onChange={(e: any) => {
    e.target.checked
      ? dispatch(appSettings?.actions?.enableDarkTheme())
      : dispatch(appSettings?.actions?.enableLightTheme());
  }}
  id="toggleSwitch"
  type="checkbox"
  Checked={theme === `light`}
/>

answered Sep 25, 2020 at 6:09

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Krisna Over a year ago

Thank you sir. i really did not know that e.target.checked. 🙏

Collectives™ on Stack Overflow

React input checkbox checked

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related