CODEWITHSUNDEEP
javascriptecmascript-6solid-js
JSnow
JSnow

Reputation: 1029

How to pass a state change on a button click as a prop to a child component and track that change on Solid.js

This is how I'm passing my prop

const [showShoppingCart, setShowShoppingCart] = createSignal<boolean>(false)

const showCart = () => {
        setShowShoppingCart(!showShoppingCart())
    }

 <Button
    id={actionItem.id}
    iconName={actionItem.icon}
    iconClassName={actionItem.className}
    onClick={() => {
                   actionItem.icon === 'Search'
                   ? showSearchPanel(actionItem)
                   : actionItem.icon === 'User'
                   ? openSubMenu()
                   : actionItem.icon === 'Bucket'
                   ? showCart()
                   : ''
              }}
    showSelectedDot={actionItem.icon === 'Bucket' && showShoppingCart()}
  ></Button>

And here is the child component

const Button = ({iconName, label, onClick, className = 'button-primary', id, iconClassName, showSelectedDot = false}: ButtonProps) => {
    const [showDot, setShowDot] = createSignal(false);
    createEffect(() => {
        console.log("show selected dot",showSelectedDot);
        setShowDot(showSelectedDot)
    })
    const icon = useIcon()
    const ButtonIcon = iconName && icon.get(iconName)
    return (
        <button class={`button ${iconName ? 'button-icon' : className}`} id={id} onClick={onClick}>
            {iconName && ButtonIcon ? <ButtonIcon class={`webstv-icon webstv-btn-icon ${iconClassName}`} /> : label}
            {showDot() && <div class='notification-dot'></div>}
        </button>
    )
}

export default Button

This is not working. I can see that the createEffect hook is not getting triggered after the first time the Button component is rendered. Can anyone help me with how to update the showDot value on the change of the button click ?

Upvotes: 0

Views: 44

Answers (1)

snnsnn
snnsnn

Reputation: 13698

You shold not destructure props as it will remove reactivity. See this answer for more detail: https://stackoverflow.com/a/76273022/7134134

Upvotes: 1

Related Questions