title: Svelte 3 : array of children to parent communication via props
body: <p>Svelte 3: Props and array of children components</p>
  
  <p>I'm planning to code a board game on hexagonal tiles, based on the excellent <em>redblobgames</em> articles, and coded with Svelte 3 / Sapper.</p>
  
  <p>My question is about commmunication between children comlponents to parent via props. I have previously done that in older versions of Svelte using the store, but I guess it's possible to do that without it.</p>
  
  <p>Supppose I have a board of herxagons SVG tiles. Eachtile is in the form of:</p>
  
  <pre><code>&lt;script&gt;
    // 3D coordinate system, see: http://redblobgames.org for details
    export let hex = { q:0, r:0, s: 0 }    
    export let center = { x:0, y: 0 }
    export let corners = []
    export let selected = false
  
    let points = corners.map (c =&gt; `${c.x.toFixed(0)},${c.y.toFixed(0)}`).join (' ')
  
    // changed by selection process (colors...)
    let inner_class = "inner_tile"
  
    const toggle_select = () =&gt; {
      selected = !selected
    }
  &lt;/script&gt;
  
  &lt;g class="tile" on:click="[ () =&gt; toggle_select() }"
    &lt;polygon class={ inner_class} [ points } /&gt;
  
    &lt;!-- more sophisticated things --&gt;
    &lt;!-- sprites, lbels, masks and animations  --&gt;
  
  &lt;/g&gt;
  </code></pre>
  
  <p>The Editor component is responsible of chossing layout from my custom implementation of the redblobgames hexagon handling library, setup the SVG container and and populate the grid with tiles. Tis is merely an each statement invoking the Hex component::</p>
  
  <pre><code>&lt;svg 
    xmlns="www.w3.org/2000/svg"
    viewBox="-50 -50 589 949" 
    width="420"
    height="500"
  &gt;
    &lt;!-- just a debugging purpose rectagle ! --&gt;
    &lt;rect x="0" y="0" width="400" height="500" style="fill: none; stroke: black;"/&gt;
  
  
    &lt;g class="tiles"&gt;
      {#each tiles  as tile }
        &lt;Hex {...tile} /&gt;
      {/each}
    &lt;/g&gt;  
  &lt;/svg&gt;
  
  &lt;!-- this helping zone keeps empty, sadly, whatever I attempt to do --&gt;  
  &lt;textarea cols="50" rows="10"&gt;
    { selected_tiles_output }
  &lt;/textarea&gt;
  </code></pre>
  
  <p>The problem comes when trying to display thr selected tiles references (q,r,s) i n  a teextarea below the board. Doinfg this in the script doesn't work:</p>
  
  <pre><code>// imports...
  
  let tiles = []
  let selected_tiles = new Set ()
  let selected_tiles_output = ''
  
  // onMount to assemlble the board ...
  
  // reactive part which doesn't work:
  $: selected_tiles_ouptut = tiles
    .filter (tile =&gt; tile.selected)
    .map (tile =&gt; tile.hex)
    .map (h =&gt; `q: ${h.q}, r: ${h.r}, s: ${h.s} \n`)
    .reduce ((acc, val) =&gt; acc + val, '')
  </code></pre>
  
  <p>QUESTION: </p>
  
  <p>Is it possible for the parent container to observe a certain prop (aka 'selected') in an array of childfren, a kind of 'currying' props in a child component ?</p>
  
  <ul>
  <li>OR -</li>
  </ul>
  
  <p>should I finally consider using the store to do that instead ?</p>
  
  <p>NOTE: at this point of the development it's hard for me to share some complete working code sample or source, since it's  heavily changing. At worst case I can zip and send by mail the src/routes and src/components sapper's folders !</p>
  
  <p>Does anyone have an idea to let me go on the right way ?</p>
  
  <p>Regards, hefeust.</p>