useState not updating[NOT AN ASYNC ISSUE]

Question

I'm new to react hooks so I'm practicing with showing and hiding a div when checking and unckecking a checkbox input. The problem is that the state updates on the main file where I have the function that handles it but in the file where I actually have the div it does not update so it does not hide or display.

File that handles the change of the state:

import {react, useState} from "react";

export const Checker = () => {
const [checked, setChecked] = useState(true)

    const clickHandler = () => {
        setChecked(!checked)
        console.log(checked)
    }
    return {checked, clickHandler, setChecked}
}

File where the checkbox is located:

import React from "react";
import { Extras, Wrapper } from "./extras.styles";
import { Checker } from "../hooks/useCheckboxes";

const Extra = () => {
    const {checked, setChecked, clickHandler} = Checker()
return <>
    <Extras>
        <Wrapper>
        
            <input type= 'checkbox' onClick={clickHandler} checked = {checked} onChange={e => setChecked(e.target.checked)}></input>
            
        
        </Wrapper>
    </Extras>
    </>
}

export default Extra;

File that contains the div i want to display and hide dynamically:

import house from '../../icons/house.png'
import { Wrapper } from "./foto.styles";
import { Checker } from "../hooks/useCheckboxes";
import { Inside, Middle} from "./foto.styles";


const Home = () => {
    const {checked} = Checker()

    return <>
    <Wrapper>
        <Inside>
            <Middle>
                {checked && <House src={house}/>}  
            </Middle>
        </Inside>
    </Wrapper>
    </>
}

export default Home;

CertainPerformance · Answer 1 · 2021-12-31T13:55:25.913

Some issues are:

Checker looks like you want it to be a custom hook, not a React component, so it should be called useChecker or something like that, not Checker
You have both a change handler and a click handler. You should only have one. If you want the new state to come from the checkbox, you should use e.target.checked. If you want the new state to flip the old state, use the clickHandler you defined in Checker.
You only need a fragment when enclosing multiple elements. If you only have one, you don't need a fragment.
Because state setters don't update the variable immediately, your console.log(checked) won't display the new value, but the old value - if you want to log the new value when it changes, use useEffect with a dependency array of [checked] instead.

const Extra = () => {
    const { checked, clickHandler } = useChecker()
    return (
        <Extras>
            <Wrapper>
                <input type='checkbox'checked={checked} onChange={clickHandler} />
            </Wrapper>
        </Extras>
    )
}

score 0 · Answer 2 · answered Dec 31 '21 at 03:00

use it like that

const {checked, clickHandler, setChecked} = Checker()

Or if you want to be able to make custom names then you need to use an array instead of an object.

the function return value.

return [checked, clickHandler, setChecked]

the function call

const [checked, setChecked, clickHandler] = Checker()

and for convention follow react hooks naming rules by renaming the function to useChecker() instead of Checker()

useState not updating[NOT AN ASYNC ISSUE]

2 Answers2