Hello,

I try to learn Surface. So I came across the Counter example (from here: Surface) :

defmodule Counter do
  use Surface.LiveComponent

  data count, :integer, default: 0

  def render(assigns) do
    ~F"""
    <div>
      <h1 class="title">
        {@count}
      </h1>
      <div>
        <button class="button is-info" :on-click="dec">
          -
        </button>
        <button class="button is-info" :on-click="inc">
          +
        </button>
      </div>
    </div>
    """
  end

  def handle_event("inc", _value, socket) do
    {:noreply, update(socket, :count, &(&1 + 1))}
  end

  def handle_event("dec", _value, socket) do
    {:noreply, update(socket, :count, &(&1 - 1))}
  end
end

In the example the count is set to 0 by default.

Let’s assume I want to use the counter on different locations:

 <Counter id="C1"  />
 <Counter id="C2"  />
 <Counter id="C3"  />

In C1 it should start at 0, in C2 at 4 and in C3 at 300.

So how can I let the component start with different values?

What I tried so far:
I can set “prop” to a value in the component “call”, but not “data assigns”.
I then tried to set a prop and then copy the value during mount to the data assign. That didn’t work.