The Array Returned by The Child Component won't Be Rendered

[cqh963852]

Greatings, I am writing some app with van jsx.

I am facing a problem.

While a function child returns an array. It won't be rendered.

const Todo = () => {
  const items = van.state<number[]>([]);
  let count = 0;
  return (
    <div>
      <button
        onclick={() => {
          items.val = [...items.oldVal, count++];
        }}
      >
        add item
      </button>

      <h1>1.1</h1>
      {/* 1.1 */}
      {() => {
        return van.tags.div(
          items.val.map((value) => {
            return van.tags.div({
              textContent: value,
            });
          })
        );
      }}

      <h1>1.2</h1>
      {/* 1.2 */}
      {() => {
        return (
          <div>
            {items.val.map((value) => {
              return <div>{value}</div>;
            })}
          </div>
        );
      }}

      <h1>2.1</h1>
      {/* 2.1 */}
      {() => {
        return items.val.map((value) => {
          return van.tags.div({
            value,
          });
        });
      }}

      <h1>2.2</h1>
      {/* 1.4 */}
      {() => {
        return items.val.map((value) => {
          return <div>{value}</div>;
        });
      }}
    </div>
  );
};

---

It seems vanjs-core treat the return of the function child as a dom. Not dom[] or dom

---

I would like to ask if it would be a good idea to add array-related rendering implementation here ?

[cqh963852]

If want to support functions that return array-type components.

It will need to do a lot of array comparison work.

This may not be conducive to keeping vanjs small in size.

[Tao-VanJS]

You can wrap the result into a pass-through container (span for inline elements and div for block elements) if multiple elements need to be returned.

See https://vanjs.org/demo#blog.