S
SolidJSdmayo2

sibling components

I've read the docs, and I just can't wrap my head around how to trigger a function in a sibling component. Can anyone point to a reference that would explain it to a 5th grader? Thanks Sibling-A has a list from a db Sibling-B is able to remove a list item from db I want Sibling-A to know that the item has been removed and re-render the list
R
REEEEE271d ago
How does Sibling B remove the list from the db? How does it access it? What is the DB here? A signal, a store, an external source?
D
dmayo2270d ago
A click on the list item in Sibling-A updates a createSignal which Sibling-B is aware of. Thanks for making me think through this. I guess I am doing this from A->B and I'm asking how to do this from B->A. I am using createRoot() to solve this. I don't know if this is the correct way to use createRoot() I created a component called commonState.js and import it into the parent (not sure it's needed there) and both Siblings.
// commonState.js
import { createSignal, createRoot } from 'solid-js'

function CommonState() {
const [getListId, setListId] = createSignal(null)
const [getSearchResults, setSearchResults] = createSignal([])

return { getListId, setListId, getSearchResults, setSearchResults }
}

export default createRoot(CommonState)
// commonState.js
import { createSignal, createRoot } from 'solid-js'

function CommonState() {
const [getListId, setListId] = createSignal(null)
const [getSearchResults, setSearchResults] = createSignal([])

return { getListId, setListId, getSearchResults, setSearchResults }
}

export default createRoot(CommonState)
When the list item is clicked in Sibling-A (sidebar) a local function is called with setListId(item_id). In Sibling-B (main content) I have the following within createEffect() retrieveItem( getListId() ) So whenever the signal getListId() is updated in Sibling-A, the function retrieveItem() in Sibling-B is automatically called, which queries the database for that one item and updates the DOM with that item. Thoughts/Comments/Suggestions? The db is external (supabase). Sibling-B is able to remove the the item from the db when that item is loaded, as it then has the item_id in question and can just calls an rpc that deletes that item from the db.
R
REEEEE270d ago
you might not need to make it in a separate file with createRoot. You could just have it in the parent and pass it through props. As for the createEffect, since the db is external you could make use of a resource where it's source signal is the listId and it will automatically refetch the data from the db
function Parent(){
const [getListId, setListId] = createSignal(null)
const [getSearchResults, setSearchResults] = createSignal([])

return(
<SiblingA setListId={setListId} />
<SiblingB listId={getListId()} />
)
}

function SiblingA(props){
return(
<button onClick={() => props.setListId(item_id)}> Set Id </button>
)
}

function SiblingB(props){
const [dbItem] = createResource(() => props.listId, retrieveItem)

return(
{dbItem()}
)
}
function Parent(){
const [getListId, setListId] = createSignal(null)
const [getSearchResults, setSearchResults] = createSignal([])

return(
<SiblingA setListId={setListId} />
<SiblingB listId={getListId()} />
)
}

function SiblingA(props){
return(
<button onClick={() => props.setListId(item_id)}> Set Id </button>
)
}

function SiblingB(props){
const [dbItem] = createResource(() => props.listId, retrieveItem)

return(
{dbItem()}
)
}
something like this
Want results from more Discord servers?
Add your server
More Posts
testing createRouteAction$ using vitestHi all! How do I go about testing createServerAction$ in vitest? I'm basically writing ``` export fucreateResource returns undefinedHello, goodnight everyone. Im having a problem using createResource. This function returns me undefiSuspense doesn't seem to work with ContextProviderhey, so recently I noticed, If I use `createResource(fetch)` and then put `<Suspense fallback={<PlLayout for layout groupTo make a layout for a route you need to make a .tsx file with the same name as the parent folder. BHow to deploy an solid js app myselfHi all, good morning. Does anyone have a resource (blog post, tutorial, vídeo, etc) teaching how to SVG A elements not created correctlyWhen using an <a> element with <Show> or <For> inside an inline SVG element, we get the namespace wrHow to add events for scrolling like React? (with solid-qurey)Hi, I've only been dealing with React projects and I'm practicing Solid-js. `createResource` offerWhat's the best way to create multiple layouts that only some routes use?I need to have multiple layouts. I'd like some pages to use different layouts, rather than a single Looking for best way to re-validate route data after some arbitrary amount of time.Hi all, good morning/afternoon/night. So, i have a routed component with nested routes that share a How to stop VS Code from erroring with `Cannot find name 'React'.ts(2304)`?VS Code is complaining with `Cannot find name 'React'.ts(2304)` but I am not using React at all. I hHow should I use createRouteData``` export function routeData({ params, location }: RouteDataArgs) { return createServerData$( How can I access a store from the parent context from inside of a nested context?I am trying to access the WebsocketContext from inside of the DataStreamContext, in order to send ouUsing `createResource` without triggering suspenseI'm trying to use `createResource` without triggering Suspense. I realised that `data.latest` still `<A>` from `solid-start` is slow on Android. How to debug performance?So, on my detail page I have a button ```jsx import { A } from 'solid-start'; const Detail = () =>