S
SolidJS14mo ago
Massukka

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>
<Alterion.Dev>14mo 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
Massukka14mo 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>
<Alterion.Dev>14mo 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
Massukka14mo 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>
<Alterion.Dev>14mo 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
Massukka14mo ago
Not sure I understand, could you post small code snippet?
<Alterion.Dev>
<Alterion.Dev>14mo 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
Massukka14mo 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>
<Alterion.Dev>14mo 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
Massukka14mo 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>
<Alterion.Dev>14mo ago
yeah that would work!
Massukka
Massukka14mo ago
alright, thanks for your help 🙂