App.svelte

<script>
  import Thing from './Thing.svelte';
  let user = { loggedIn: false };
  
  let things = [
    { id: 1, name: 'apple' },
    { id: 2, name: 'banana' },
    { id: 3, name: 'carrot' },
    { id: 4, name: 'doughnut' },
    { id: 5, name: 'egg' },
  ];

  function handleClick() {
    things = things.slice(1);
  }
  
  function toggle() {
    user.loggedIn = !user.loggedIn;
  }
</script>

{#if user.loggedIn}
  <button on:click={toggle}>
    Log out
  </button>
{:else}
  <button on:click={toggle}>
    Log in
  </button>
{/if}

<button on:click={handleClick}>
  Remove first thing
</button>

{#each things as thing (thing.id)}
  <Thing name={thing.name}/>
{/each}

Thing.svelte

<script>
  const emojis = {
    apple: "🍎",
    banana: "🍌",
    carrot: "🥕",
    doughnut: "🍩",
    egg: "🥚"
  }

  // the name is updated whenever the prop value changes...
  export let name;

  // ...but the "emoji" variable is fixed upon initialisation of the component
  const emoji = emojis[name];
</script>

<p>
  <span>The emoji for { name } is { emoji }</span>
</p>

<style>
  p {
    margin: 0.8em 0;
  }
  span {
    display: inline-block;
    padding: 0.2em 1em 0.3em;
    text-align: center;
    border-radius: 0.2em;
    background-color: #FFDFD3;
  }
</style>