vendredi 13 août 2021

React URL redirect on OnChange depending on state of checkbox

I have a semantic react checkbox which toggles between false and true. I have an onChange which when the state of the checkbox changes, it changes the page to the link

onChange={() => window.location.href = '/link/newlink'}

I have a second link with the following url: /link/anotherlink

How do I make it so when my checkbox is toggled to a false state, it takes the user to /link/anotherlink and when it toggles to a true state it changes to /link/newlink?

This is my code so far

import * as React from "react";
import { Checkbox } from "semantic-ui-react";
import { NavLink, Redirect } from "react-router-dom";

type Props = {
    label: string;
};

type State = {
    status: boolean;
};


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

    componentDidMount() {
        const status = localStorage.getItem("status");
        this.setState({ status: status === "true" ? true : false });
    }

    componentDidUpdate(nextProps, nextState) {
        localStorage.setItem("status", "" + this.state.status);
    }

    

    render() {
        return (
            <Checkbox
                onClick={() => this.setState({ status: !this.state.status })}
                onChange={() => window.location.href = '/link/newlink'}
                label={this.props.label}
                checked={!this.state.status}
                toggle
            />
        );
    }
}

export default OrderCatalog;




Aucun commentaire:

Enregistrer un commentaire