SolidJSS
SolidJS•2mo ago•
4 replies
SilverLining

Contexts and resolved children

Hi, I'm trying to create a table component. The idea would be to have something like this:

const App = () => {
  return (
    <Table checkbox={true}>
      <Table.Headers>
        <>A</>
        <>B</>
        <>C</>
      </Table.Headers>
      <Table.Row>
        <>r1-c1</>
        <>r1-c2</>
        <>r1-c3</>
      </Table.Row>
      <Table.Row>
        <>r2-c1</>
        <>r2-c2</>
        <>r2-c3</>
      </Table.Row>
      <Table.Row>
        <>r3-c1</>
        <>r3-c2</>
        <>r3-c3</>
      </Table.Row>
    </Table>
  );
};


Where the optional checkbox attribute should get propagated to the rows and headers so that a check box is added as the first column if checkbox == true. For that I'm trying to use a context, not sure if it's the best approach but I tried a couple other things and none work. However, as you can see here in the playground, when I try to separate the headers and rows like this:

  const resolvedChildren = children(() => props.children).toArray();
  const headers = resolvedChildren[0];
  const rows = resolvedChildren.slice(1);


I need to use the children() function (at least that's the only way I know of to achieve this), and this doesn't play nice with the context since the children get evaluated before the context provider is set up, and so the default context value is always used and the checkboxes never show up.

I'd like to know if contexts are the correct approach here, and if so how to solve this issue with the resolved children.

Thanks!!
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
Was this page helpful?