title: Keep track of state in child-component component from withing parent component in Svelte (Data-flow/communication from child to parent in Svelte)
body: <p>As I am quite new to the way of reactive thinking I am having a hard time to grasp some basics concepts. I also think to this question there are many ways to solve this which is quite overwhelming for a begginer. So here is my simple question:</p>
  <p>I have a parent component and a child component. The only thing (for now) that the parent component is doing is importing the child component and rendering it. The child component itself goes (on click) through an array of text and displays it. When reached the end I want to unmount this component. However, as far as I know, this is usually done from the parent. E.g. by wrapping it in a pseudo if-statement like this:</p>
  <pre><code>{#if childNotFinished}
      &lt;Child/&gt;
  {/if}
  </code></pre>
  <p>But I simply do not know what the best way is to communicate to the parent that the child is &quot;done&quot;</p>
  <p>My two components look like this and are in the repl here (<a href="https://svelte.dev/repl/c787b13ebe524af8af3d97d71e7c8510?version=3.49.0" rel="nofollow noreferrer">https://svelte.dev/repl/c787b13ebe524af8af3d97d71e7c8510?version=3.49.0</a>):</p>
  <pre><code># App.svelte
  &lt;script&gt;
  import Intro from &quot;./Intro.svelte&quot;
  &lt;/script&gt;
  
  &lt;Intro&gt;&lt;/Intro&gt;
  &lt;!--
  {#if IntroFinished}
  Do something new, import a new component, ....
  {/if}
  --&gt;
  </code></pre>
  <pre><code># Intro.svelte
  &lt;script&gt;
    let currentStep = 0;
    
    let steps = [
      { text: &quot;this&quot; },
      { text: &quot;is&quot; },
      { text: &quot;a&quot; },
      { text: &quot;test&quot; },
    ];
  
    function showNext() {
      if (currentStep === steps.length - 1) {
        return;
      }
      currentStep++;
    }
  
    function showPrev() {
      if (currentStep === 0) {
        return;
      }
      currentStep--;
    }
  &lt;/script&gt;
  
  &lt;button on:click={showPrev}&gt;Last&lt;/button&gt;
  &lt;button on:click={showNext}&gt;Next&lt;/button&gt;
  
  &lt;div&gt;
    {steps[currentStep].text}
  &lt;/div&gt;
  
  {#if currentStep === steps.length - 1}
    &lt;button&gt;Start New Thing&lt;/button&gt;
  {/if}
  
  </code></pre>
  <p>Maybe there are some best practices or good ressources on how to approach something like this. Or more general on data-flow (up and down) in svelte. It feels like there are coming so many new possibilities each time that I do not know which to use and how to solve this.</p>