# presentation/renderers/lesson.renderer.ts

> 20 lines of code and 5 definitions.

Tree: Site tree
Language: typescript
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-renderers-lesson-renderer-ts
Source text: https://banes-lab.com/assets/sources/source.b6dcc28283dbb7d89da6fdb3d9daf466a1657c76abaaacce0f84984fb07edf62.generated.txt

## Definitions

- `renderLesson` (lexical_declaration, line 19, exported)
- `paragraphsOf` (lexical_declaration, line 10)
- `paragraph` (lexical_declaration, line 6)
- `groups` (lexical_declaration, line 11)
- `wrapper` (lexical_declaration, line 20, exported)

## Uses

- [core/factories/element.factory.ts](https://banes-lab.com/source/tree/core/factories/element.factory.ts.md)
- [presentation/renderers/text.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/text.renderer.ts.md)

## Used by

- [presentation/renderers/block.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/block.renderer.ts.md)

## Source

```typescript
import { appendChildren, createElement } from "#core/factories/element.factory";
import type { LessonBlock } from "#types/block.types";
import { SPACE } from "#configuration/constants/document.constants";
import { fillMarkup } from "#presentation/renderers/text.renderer";

const paragraph = function paragraph(fields: readonly string[]): Element {
    return fillMarkup(createElement("p", { className: "chapter-text" }), fields.join(SPACE));
};

const paragraphsOf = function paragraphsOf(block: LessonBlock): Element[] {
    const groups = [
        [block.problem, block.failureMode, block.cause],
        [block.principle, block.decision, block.application],
        [block.validation, ...(block.boundary === undefined ? [] : [block.boundary])],
    ];
    return groups.map(paragraph);
};

export const renderLesson = function renderLesson(block: LessonBlock): Element {
    const wrapper = createElement("div", { className: "block-lesson" });
    appendChildren(wrapper, paragraphsOf(block));
    return wrapper;
};
```