Filtering in an iteration field

Technical Questions
,
1

Builder content link

Builder public api key
582def2244ac4cc8b2a83a53c64e1d09

What are you trying to accomplish
I want to iterate over an object and filter the children and iterate over the filtered values.

I put the following in the “repeat for each fields”:

[ _ ] Box repeat for each: state.materialsProduct
|
|__ [ _ ] Box2 repeat for each:

state.materialEvaluation.filter(item => 
item.material_id_fk === state.materialsProductItem.id_material)

|
|__ Text field with Value: filterItem.value

It “works”. But as the materialsProductItem is not a state but a iteration key, builder has some trouble prerendering the state server side.
So I get an hydration error.

How can I work around the hydration error? Is there some conditional rendering I can put in like isBrowser && filter… or ssr:false?
I alredy tried working direclty in the JSX API Editor. But as it is experimental it crashed the whole page. I also tried to work with checks like:

state.materialsProductItem && state.materialEvaluation && state.materialEvaluation.filter(...)

Would be nice if the iteration field would have custom coding possibility.

Screenshots or video link

image
image951×663 26.2 KB

Code stack you are integrating Builder with
*e.g. NextJS, Builder Dashboard

2

Hey @AndreasB , I couldn’t see any data connected on your page where you are applying this repeat. Are you handling this in your integration? If so, please share your integration code with me so that I can investigate this further.

3

Hi @sheema,

this is because the data api can not be called with an url slug.
See my unanswered post here:

So I fetch the data in next with fetch api based on the url and put it into builder as state.

I try to build a minimal example as this shouldn’t dependent where the data comes from.

Thanks for your help.

Andreas

4

Hi @sheema,

here is code for a minimal reproduction:

// /app/page.tsx (HomePage)
import { RenderBuilderContent } from "@/components/builder";
import { fetchPageContent } from "@/serverComponents/content.server";
import builder, { BuilderComponent } from "@builder.io/react";
import { redirect } from "next/navigation";

export default async function HomePage() {
  const content = await fetchPageContent("/demo-builder-error");

 // you can use these objects for testing
  const items = [
    {
      id: 1,
      name: "Test",
      price: 10,
    },
    {
      id: 2,
      name: "Test2",
      price: 20,
    },
  ];


  const otherItems = [
    {
      id: 1,
      value: "A",
    },
    {
      id: 2,
      value: "B",
    },
  ];

// we inject this in the state

  return (
    <RenderBuilderContent
      content={content}
      data={{ items, otherItems }}
      model="page"
    />
  );
}

This is the demo-builder-error page:

I have it build like this:

image
image347×113 1.91 KB

First box iterates over items
Second box iterates over otherItems and filters by the current itemsItem.id.

The textbox shows the resulting item.

Works theoretically, but throws an hydration error in console.

5

Hello @AndreasB,

Could you please confirm which builder SDK and Next.js version you are using? Thank you!

6

Hello @AndreasB ,

If this issue persists, please let us know. We’re happy to help!

Thanks,

7

Hi manish,

I use builder sdk 2.2.4 and next 14.2.4.

8

Hello @AndreasB,

For filtering values, I recommend using the Edit Content JS + CSS section under the Data tab rather than the repeat for each binding. Here’s an example:

Screenshot 2024-12-05 at 11.39.31 PM
Screenshot 2024-12-05 at 11.39.31 PM2872×1450 391 KB

I’m not entirely sure about the specific use case for filtering items using repeat-for-each, but if the above solution doesn’t meet your needs, please feel free to provide more details. We’d be happy to explore alternative options and assist further.

Thanks,