is there any way to update props on some different component which is not child component or parent component on custom dispatch event?

Question

i am learning svelte i don't wan to use any store management etc. i am trying to grab the basics of svelte in depth i have tried alot but i dont see any fix for this , this is my code

<script>
    const toggleModal = () => {
        openModal = !openModal
    }
    const addPersonCustomEvent = (e) => {
        person = e.detail;
        console.log(person)
        // PersonsLoop.set({personData: person})
    }
</script>

<main>
    <Header />
    <button on:click={() => {toggleModal()}}>open modal</button>
    <section>
        <PersonsLoop personData={person} />
    </section>
</main>
<Modal isPromo={true} body="main modal here" openModal={openModal} on:click={() => {toggleModal()}}  >
    <Form on:addPerson={addPersonCustomEvent} />
</Modal>

in this i have created a addPerson custom event and forwarding that event to the component , currently it is setting the value in person variable but it is not updating the value in PersonsLoop component i am logging the value in personsloop component and it is not working is there anyway to do that

Update i think basically what i want to ask is how to rerender component when prop updates

Answer 1

You forgot to declare the variable person. You're always passing into PersonLoop an undefined value. That's why your changes doesn't reflect into personData.

Add this line in your code and should be fine:

<script>
    let person;
    // the rest seems fine ...
</script>

Check this REPL if you want a minimal working example