React Checkbox Component not saving state to LocalStorage

Question

I am creating a component in React which includes a checkbox. I want it to toggle back and forth (on and off) and save the state in local storage so if I go to another page, the toggle will be set to what it was before.

Note: I am not using React 16 and can not use state hooks

I created my component and added the ComponentDidMount and ComponentDidUpdate functions as below.

import * as React from "react";
import { Checkbox } from 'semantic-ui-react'

type Props = {
    label : string
}

type State = {
    status: boolean
}



class ChangeOrder extends React.Component<Props, State> {
    constructor(props) {
        super(props);
        this.state = {
            status: false
        }
    }

    componentDidMount() {
        localStorage.getItem('status') && this.setState({
            status: JSON.parse(localStorage.getItem('status'))
        })
    }

    

    componentDidUpdate(nextProps, nextState) {
        localStorage.setItem('status', JSON.stringify(nextState.status));
    }
    render() {
        return (
            
            <Checkbox
                
                onClick={() => this.setState({ status: !status })}
                label={this.props.label}        
                toggle

            />
        );
    }
}

export default ChangeOrder;

The checkbox works but it does not save the state.

When I right click to inspect and go to Application and navigate to LocalStorage, I see the value of the toggle switch go from false to true but clicking it again does not return it to false.

I want to be able to save and persist the toggle button state between true and false.

Abdelrhman Arnos · Accepted Answer · 2021-08-12 23:49:02Z

2

You just need to set the status on click event from the state to be this.state.status, pass the status value to checked prop to ensure the input has the expected value. Also, I prefer not to use stringify the boolean values instead, evaluate the string boolean value to boolean type. I built an app to check out on codesandbox.

edited Aug 12, 2021 at 23:49

answered Aug 12, 2021 at 22:59

Abdelrhman Arnos

1,4423 gold badges14 silver badges26 bronze badges

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

2 Comments

HotWheels Over a year ago

Hi, thanks this made it go from false to true and then back to false in the local storage but how do I make it persist that state if I were to refresh the page?

Abdelrhman Arnos Over a year ago

OK, I updated the codesandbox and it's working now according to your reply. Please check the component there.

Inshaf Ahmed · Accepted Answer · 2021-08-13 06:54:46Z

0

i think your missing this.status in your Checkbox click function change

onClick={() => this.setState({ status: !status })}

to

onClick={() => this.setState({ status: !this.state.status })}

answered Aug 13, 2021 at 6:54

Inshaf Ahmed

4616 silver badges10 bronze badges

Collectives™ on Stack Overflow

React Checkbox Component not saving state to LocalStorage

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related