SolidJS•2y ago

How should i render components stored in array?

const arr = [<Component props={$prop}>, <ComponentTwo props={$prop}>]

return(
<For each={arr()}>{(el, i) => {<div>{"text"}</div>
el(propsA)
el(propsB}
</For>

const arr = [<Component props={$prop}>, <ComponentTwo props={$prop}>]

return(
<For each={arr()}>{(el, i) => {<div>{"text"}</div>
el(propsA)
el(propsB}
</For>

arr is supposed to be signal obviously but this is pseudo code mostly. Basically I want components to be stored in array or some other concise way. So that I can add that div every two component and components have to have different props for each element in for loop.

12 Replies

<Alterion.Dev>•2y ago

Why woudl you need to do that, rather than just doing a regular render inside the <For> element? What's the use of the array in this case?

MassukkaOP•2y ago

I cant use <for> afaik unless components are in array. Basically code becomes like this :

<div>same text</div>
<Component props={propsA} props={left} />
<Component props={propsB} props={right} />
<div> same text</div>
<ComponentTwo props={propC} props={left} />
<ComponentTwo props={propsD} props={right} />
<div>same text</div>
<Component props={propsE} props={left} />
<Component props={propsF} props={right} />

<div>same text</div>
<Component props={propsA} props={left} />
<Component props={propsB} props={right} />
<div> same text</div>
<ComponentTwo props={propC} props={left} />
<ComponentTwo props={propsD} props={right} />
<div>same text</div>
<Component props={propsE} props={left} />
<Component props={propsF} props={right} />

<Alterion.Dev>•2y ago

Well ok but... how are you building the array, then? Do you have data in an array or structure that you can loop on? or is it just hardcoded data Because if you're hardcoding an array, it makes little difference to hardcoding them in the jsx

MassukkaOP•2y ago

Well its like in OP an array of components. array can be looped with <For>, but I would also need to dynamically add left and right props

<Alterion.Dev>•2y ago

Could you not make an array of values instead, then? Or if it's just repeated text, use something like Array.from(Array(5)) and loop on that?

MassukkaOP•2y ago

Not sure I understand, could you post small code snippet?

<Alterion.Dev>•2y ago

const five = Array.from(Array(5));

return (
  <For each={five}>{() => {
    <div>same text</div>
    <Component props={propsA} props={left} />
    <Component props={propsB} props={right} />
  }</For>
)

const five = Array.from(Array(5));

return (
  <For each={five}>{() => {
    <div>same text</div>
    <Component props={propsA} props={left} />
    <Component props={propsB} props={right} />
  }</For>
)

That would repeat the same thing 5 times

MassukkaOP•2y ago

Yeah, but I dont need to repeat same thing 5 times, Its basically hardcoded array of different components that need to be appearing in specific order, for side by side comparision

<Alterion.Dev>•2y ago

but, why not have a hardcoded array of the data needed to display the components instead of an array of components

const componentData = [
 [propsA, propsB],
 [propsC, propsD],
 [propsE, propsF],
]

const componentData = [
 [propsA, propsB],
 [propsC, propsD],
 [propsE, propsF],
]

Then loop on componentsData separating your data from your view is always much cleaner and easier to read in the long term

MassukkaOP•2y ago

 const [compOrder, setCompOrder] = createSignal<
    (
      | (Stat & CompType)
      | (YesOrNo & CompType)
      | (Doughnut & CompType)
      | (Bar & CompType)
      | (Text & CompType)
    )[]
  >([
    { type: "stat", name: "Total Responses", stat: "total" },
    {
      type: "doughnut",
      header: "Share of diagnosis",
      stat: "diagnosis",
      function: "dataSelection",
    },
  ]);

 const [compOrder, setCompOrder] = createSignal<
    (
      | (Stat & CompType)
      | (YesOrNo & CompType)
      | (Doughnut & CompType)
      | (Bar & CompType)
      | (Text & CompType)
    )[]
  >([
    { type: "stat", name: "Total Responses", stat: "total" },
    {
      type: "doughnut",
      header: "Share of diagnosis",
      stat: "diagnosis",
      function: "dataSelection",
    },
  ]);

Uh, guess I did that way, if i understood correctly. type is basically the component, and it gets resolved in custom component wtih switch and match jsx

<Alterion.Dev>•2y ago

yeah that would work!

MassukkaOP•2y ago

alright, thanks for your help 🙂

Gaming

Programming

How should i render components stored in array?