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.