strange hydration mismatch about solid

[birkskyum]

@teidesu , so the JSX should be returned in a function like this:

interface TextTableProps {
  items: {
    name: string;
    value: () => JSX.Element;
  }[];
}

and then the value can be set as:

value: () => (
              <>
                foo<div>div</div>
              </>
            ),

and used in a template as:

<div>
  {item.name}: {item.value()}
</div>

[birkskyum]

solid start example of same error

[ryansolid]

It's that you are recreating the items every time you access the prop. We evaluate expressions lazily. In so you are creating DOM elements that haven't been inserted in the DOM and when the client tries to find them they aren't there. So the error is correct and by design.

We recommend using children helper(https://docs.solidjs.com/reference/component-apis/children) if you wish to read children outside of the JSX and use them multiple places.

  const propItems = children(() => props.items).toArray();
  const maxNameLength = createMemo(() =>
    Math.max(...propItems.map((item) => item.name.length))
  );

  const items = () =>
    propItems.map((item) => (
      <div>
        {item.name}: {item.value}
      </div>
    ));

This will not have any issue. Alternatively you can have the JSX in the passed in template be created lazily itself by wrapping it in a function as suggested above.