SolidJS•17mo 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>•17mo 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?

Massukka•17mo 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>•17mo 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

Massukka•17mo 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>•17mo 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?

Massukka•17mo ago

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

<Alterion.Dev>•17mo 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

Massukka•17mo 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>•17mo 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

Massukka•17mo 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>•17mo ago

yeah that would work!

Massukka•17mo ago

alright, thanks for your help 🙂

Gaming

Programming

How should i render components stored in array?