Using signal in child component
Hi,
I'm new to all this and am trying to figure out how to control a signal from a child component.
In my case I'm using solid-bootstrap to present a modal. The modal showing and hiding is triggered by a signal 'show' which is set by a button to show it and a cancel button to hide it.
It all works great in one big component but I'd like to break the modal out to another component and have it be able to close itself. Since it opens with a button in the parent I think I need the signal there, but when I try to pass it to the child as a function <MyModal setShow={setShow} /> it does not work.
What is a good way to structure something like this?
Thanks in advance.
5 Replies
how are you using it in the child?
<Button variant="primary" onClick={() => setShow(true)}>
Test
</Button>
are you destructuring props?
Sorry I cut and pasted the wrong thing. My modal actually has the code below. I see the console.log but the modal stays up. It should close when 'show' is set to false.
<Modal
show={props.show()}
onHide={() => {
console.log("In onHide");
props.setShow(false);
}}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
And I create the modal like this <NewProjectForm show={show} setShow={setShow} />
Nevermind. I think I figured it out.
Thanks for your help.
Could you provide the full code of these components, not just the jsx? That would make it more clear what might be going on 🙂