florian Posts - Answer Overflow

florian

Posts Comments

SSolidJS

•Created by florian on 6/9/2024 in #support

Split server code from client code

32 replies

SSolidJS

•Created by florian on 6/8/2024 in #support

Run route.load and access return value only once when navigating to page

17 replies

SSolidJS

•Created by florian on 12/12/2023 in #support

Pass every child in props.children a context of their index

I want to create a table where every cell knows its column number without passing it via props. I tried multiple things but they all either didn't work at all or returned undefined when getting the index from the context. Here is how I would like it to work:

const ColumnContext = createContext();

function Cell(props) {
  const column = useContext(ColumnContext);
  
  onMount(() => console.log(column)); // logs undefined, expected index
  
  return (
    ...
  );
}

function Row(props) {
  const resolved = children(() => props.children);
  return (
    <div>
      <For each={resolved()}>
        {(child, index) => (
          <ColumnContext.Provider value={index()}>
            {child}
          </ColumnContext.Provider>
        )} 
      </For>
    </div>
  );
}

function App() {
  return (
    <Row>
      <Cell>...</Cell>
      <Cell>...</Cell>
      <Cell>...</Cell>
    </Row>
  );
}

const ColumnContext = createContext();

function Cell(props) {
  const column = useContext(ColumnContext);
  
  onMount(() => console.log(column)); // logs undefined, expected index
  
  return (
    ...
  );
}

function Row(props) {
  const resolved = children(() => props.children);
  return (
    <div>
      <For each={resolved()}>
        {(child, index) => (
          <ColumnContext.Provider value={index()}>
            {child}
          </ColumnContext.Provider>
        )} 
      </For>
    </div>
  );
}

function App() {
  return (
    <Row>
      <Cell>...</Cell>
      <Cell>...</Cell>
      <Cell>...</Cell>
    </Row>
  );
}

Is this even possible and if so how?

24 replies

Gaming

Programming