onClick not changing useState in REACTJS

Viewed 174

The method closeBet does not seem to trigger anything when I click it. Could anyone explaining me why? I think I implemented everything properly just does not understand why is not working properly. Also even the other useState isActive is not doing its job. So what Should I do in order to change useState properly onClick.Thanks in advance

import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import FilterMenu from "./selectButton";
import FetchRandomBet from "./fetchRandomBets";

function Betslip() {
    const data = [
        {
            value: 0,
            label: "No Filter"
        },
        {
            value: 1,
            label: "Less than two"
        },
        {
            value: 2,
            label: "More than two"
        },
    ]

    const [selectedValue, setSelectedValue] = useState(0);
    const [allStakes, setAllStakes] = useState(null);
    const [isActive, setActive] = useState("false");

    const handleChange = obj => {
        setSelectedValue(obj.value);
    }

    const betNow = () => {
        if (!allStakes) {
            const stakes = localStorage.getItem("stakes");
            const jsnStake = JSON.parse(stakes) || [];
            setAllStakes([jsnStake]);
            setActive(isActive);
            console.log('yes')
        } else if (allStakes) {
            localStorage.setItem("stakes", null);
            setAllStakes([])
            console.log('no')
        }
    }

    const closeBet = () => {
        setActive("false");
    }

    console.log(allStakes)

    return (
        <div className="betslip">
            <div className="betslip-top">
                <h1 className="text">BETSLIP</h1>
                <p className="text-two">BET WITH US!</p>
                <div>
                    <FilterMenu
                        optionsProp={data}
                        valueProp={selectedValue}
                        onChangeProp={handleChange}
                    />
                </div>
            </div>
            <div>
                <FetchRandomBet
                    valueProp={selectedValue}
                />
            </div>
            <Button
                onClick={betNow}
                className="betnow"
                variant="contained"
            >
                Bet Now!
                </Button>
            <div className={isActive ? "bet-show" : "bet-noshow"}>
                <button
                    onClick={closeBet}>
                    x
                </button>
                <h1>
                    {allStakes}
                </h1>
            </div>
        </div >
    );
}

export default Betslip;
2 Answers

You are using string instead of boolean value for your isActive state. It should be like this:

const [isActive, setActive] = useState(false);

and when updating the state:

const closeBet = () => {
   setActive(false);
}

Remove quotes around false value and it should work as expected.

You probably want to set the value to false, so you should not use quotes as it becomes a string then.

setActive(false);
Related