Inline component definition?

[shy stag]

Is there a way to define a function returning JSX inline (such as in the Astro frontmatter)?

I have a data which I map over to create elements but I split this data into two halves first. So I want to define the map function in the file once and use it like this for example:

---
function render(data) {
  return (<div>...</div>)
}
---
<div>
        {firstHalf.map(render)}
    </div>
    <div>
        {secondHalf.map(render)}
    </div>

This doesn't work so I am wondering what options I have other than moving it into another Astro component.

[timber vale]

in the frontmatter, you can consider it like node.js for functions, but creating more than one Astro component per .astro file is "by design" not possible. I guess the goal was to keep simplicity and readability enforced by the .astro format.