Hi im new to react hooks so im 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 dinamicly:

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;

CodePudding user response：

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.

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

CodePudding user response：

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()