How Do I Include My Component in the Main Component

[jgarte]

Hi,

How do I include my component in the Main component?

Is the Main component special?

For example, the below code produces the following error message:

component Counter {
  state counter = 0

  fun increment {
    next { counter: counter + 1 }
  }

  fun render {
    <div>
      <span>
        counter
      </span>

      <button onClick={increment}>
        "Increment"
      </button>
    </div>
  }
}

component Main {
    <Counter />
}

[jgarte]

Answer to self 🦆

All components must have a render function 📖

I didn't implement the render function:

fun render {
    <div><Counter/></div>
  }

Complete Example

component Counter {
  state counter = 0

  fun increment {
    next { counter: counter + 1 }
  }

  fun render {
    <div>
      <span>
        counter
      </span>

      <button onClick={increment}>
        "Increment"
      </button>
    </div>
  }
}

component Main {
  fun render {
    <Counter/>
  }
}