Nested For Loop?

Quick Version: Every time a For loop runs I'd like for one item to be displayed from the first set of data and one item from the second set of data.

I have a For loop that creates a list of items fetched from a database. The stuff from the database is fed to a component in the For loop and each item in the list is the result of the component. OK!

I have another list of items fetched from a database. Each time an item from the first data set is created in the For loop I'd like to create an item from the second data set using the same component in the For loop.

I feel like I'm just thinking about this wrong.

export const Component = (props) => {
  const params = useParams()

  const oneList = createServerData$(
    (value) => getSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  const twoList = createServerData$(
    (value) => testSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  return (
    <For
      each={oneList()}
      fallback={<div class='text-textColor'>Loading A List...</div>}
    >
      {(item) => (
        <AnotherComponent
          aProp={props.propsThing}
          bProp={item.thing}
          cProp={item.thingTwo}
          aBoolean={true}
        />
***//SOMEHOW CREATE ITEM FROM SECOND DATA SET HERE***
      )}
    </For>
  )
}

export const Component = (props) => {
  const params = useParams()

  const oneList = createServerData$(
    (value) => getSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  const twoList = createServerData$(
    (value) => testSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  return (
    <For
      each={oneList()}
      fallback={<div class='text-textColor'>Loading A List...</div>}
    >
      {(item) => (
        <AnotherComponent
          aProp={props.propsThing}
          bProp={item.thing}
          cProp={item.thingTwo}
          aBoolean={true}
        />
***//SOMEHOW CREATE ITEM FROM SECOND DATA SET HERE***
      )}
    </For>
  )
}

Nested For Loop?

export const Component = (props) => {
  const params = useParams()

  const oneList = createServerData$(
    (value) => getSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  const twoList = createServerData$(
    (value) => testSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  return (
    <For
      each={oneList()}
      fallback={<div class='text-textColor'>Loading A List...</div>}
    >
      {(item) => (
        <AnotherComponent
          aProp={props.propsThing}
          bProp={item.thing}
          cProp={item.thingTwo}
          aBoolean={true}
        />
***//SOMEHOW CREATE ITEM FROM SECOND DATA SET HERE***
      )}
    </For>
  )
}

export const Component = (props) => {
  const params = useParams()

  const oneList = createServerData$(
    (value) => getSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  const twoList = createServerData$(
    (value) => testSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  return (
    <For
      each={oneList()}
      fallback={<div class='text-textColor'>Loading A List...</div>}
    >
      {(item) => (
        <AnotherComponent
          aProp={props.propsThing}
          bProp={item.thing}
          cProp={item.thingTwo}
          aBoolean={true}
        />
***//SOMEHOW CREATE ITEM FROM SECOND DATA SET HERE***
      )}
    </For>
  )
}

Nested For Loop?

Similar Threads

Nested For Loop?

Similar Threads

Similar Threads

Similar Threads