SolidJS•2y ago

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

3 Replies

REEEEE•2y 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?

dmayo2OP•2y 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.

REEEEE•2y 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

Gaming

Programming

sibling components