# Repeat for Each Not Reacting to State Changes in Builder.io

**URL:** <https://forum.builder.io/t/repeat-for-each-not-reacting-to-state-changes-in-builder-io/15911>\
**Category:** Technical Questions\
**Created:** [November 4, 2025, 4:39am UTC](https://forum.builder.io/t/repeat-for-each-not-reacting-to-state-changes-in-builder-io/15911 "2025-11-04T04:39:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cyrus-Gilani](https://avatars.discourse-cdn.com/v4/letter/c/77aa72/32.png) [@Cyrus-Gilani](https://forum.builder.io/u/Cyrus-Gilani)\
**Post date:** [November 4, 2025, 4:39am UTC](https://forum.builder.io/t/repeat-for-each-not-reacting-to-state-changes-in-builder-io/15911/1 "2025-11-04T04:39:12Z")

</div>

Hi [Builder.io](http://Builder.io) Team,

I’m stuck on a data-binding issue in my Next.js (v14) app and hope you can help.

**Goal:**  
I want to display a list of filaments fetched from my Vercel API using a “Repeat for each” block in Builder.

**Setup:**

- Next.js app on Vercel using `pages/[[...page]].js`.

- Vercel API at `/api/admin/inventory/getFilaments` works perfectly and returns JSON:

```auto
[{"id":"LN997...", "colorName":"Test Red"}]

```

- On my `/admin/operations` page, I use this code in the **Edit Content JS + CSS** box to fetch data:

```auto
import { useState, useEffect } from 'react';

// Use React state
const [filamentsList, setFilamentsList] = useState([]);

// Connect to Builder's state
state.filamentsList = filamentsList;

// Fetch data on load
useEffect(() => {
  const BASE_URL = window.location.origin;

  fetch(`${BASE_URL}/api/admin/inventory/getFilaments`)
    .then(res => res.json())
    .then(data => {
      console.log("Filaments data fetched:", data);
      setFilamentsList(data); // <-- Use the setter
    })
    .catch(error => console.error("Error fetching filaments:", error));
}, []);

```

**The Problem:**  
I have a Box element with “Repeat for each” set to `state.filamentsList`, but it renders nothing (blank list).

**The Proof:**  
If I add a separate Text element bound to:

```auto
state.filamentsList[0].colorName

```

it correctly displays “Test Red.”

**Question:**  
The data is clearly being fetched, and the state is being updated (as the Text element proves). Why does the Text element react to the state change, but the Repeat for each block does not? How can I force the repeater to update when `state.filamentsList` changes?  
I suspect this might be related to how state is being updated in the “JS + CSS” box. I’ve tried directly assigning to `state.filamentsList = [...]`, but the repeater still doesn’t update. Could this be a reactivity issue with [Builder.io](http://Builder.io)’s Repeat component when the state changes?

Thank you!

Public API Key: 590b8fc7fe6f4f9590676376cdbf6d01

---

<div class="post-metadata">

**Author:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [November 5, 2025, 10:51am UTC](https://forum.builder.io/t/repeat-for-each-not-reacting-to-state-changes-in-builder-io/15911/2 "2025-11-05T10:51:10Z")

</div>

Hi @Cyrus-Gilani

The `Repeat for each` binding in Builder only re-renders when it detects that the _reference_ of the bound array changes. In your setup, `state.filamentsList` is assigned only once (at component mount), and while the React state `filamentsList` updates, Builder doesn’t “see” that as a new array unless you explicitly assign it again inside your effect.

Use this in your “Edit Content JS + CSS” box:

```auto
import { useState, useEffect } from 'react';

const [filamentsList, setFilamentsList] = useState([]);

useEffect(() => {
  const BASE_URL = window.location.origin;

  fetch(`${BASE_URL}/api/admin/inventory/getFilaments`)
    .then(res => res.json())
    .then(data => {
      console.log("Filaments data fetched:", data);

      // Update both React and Builder state
      setFilamentsList(data);
      state.filamentsList = [...data]; // <-- trigger Builder reactivity
    })
    .catch(error => console.error("Error fetching filaments:", error));
}, []);

```

This should get it working. Let me know if there is anything else I can help you with.

---

<div class="post-metadata">

**Author:** ![Cyrus-Gilani](https://avatars.discourse-cdn.com/v4/letter/c/77aa72/32.png) [@Cyrus-Gilani](https://forum.builder.io/u/Cyrus-Gilani)\
**Post date:** [November 7, 2025, 6:48am UTC](https://forum.builder.io/t/repeat-for-each-not-reacting-to-state-changes-in-builder-io/15911/3 "2025-11-07T06:48:28Z")

</div>

Hi Sheema,

Thank you so much! That was exactly it. Using `state.filamentsList = [...data];` immediately fixed the reactivity issue.

I’m now seeing the correct number of blank rows (two, in my case), so the repeater is definitely working.

I’m stuck on the final step: binding the data _inside_ the repeater. Here’s exactly what I’m doing:

1. I select an `<input>` component that is inside my repeating ‘Box’.

2. I go to that input’s **Data** tab \> **“HTML Attributes”**.

3. I add an attribute: **Name** = `value`, **Value** (binding) = `item.material`.  
Note, this also causes that binding to show for that input in the data tab.

This causes a `ReferenceError: item is not defined` in the console. (I’ve also tried `index` with `state.filamentsList[index].material`, but that gives a `ReferenceError: index is not defined`).

To be clear, I am setting up the repeater on the ‘Box’ component using the **Data** tab \> **“Element data bindings”** \> **“Repeat for each”** = `state.filamentsList`. My component’s **Options** tab does _not_ have the “Item alias” or “Item variable name” field I’ve seen in other tutorials.

When using the **“Element data bindings”** method to create a repeater, what is the correct local variable name to access the data for each row (e.g., `item.material`)?

Thanks again for your help!

---

<div class="post-metadata">

**Author:** ![Cyrus-Gilani](https://avatars.discourse-cdn.com/v4/letter/c/77aa72/32.png) [@Cyrus-Gilani](https://forum.builder.io/u/Cyrus-Gilani)\
**Post date:** [November 11, 2025, 7:27pm UTC](https://forum.builder.io/t/repeat-for-each-not-reacting-to-state-changes-in-builder-io/15911/4 "2025-11-11T19:27:10Z")

</div>

Could you please clarify the correct local variable to access the data? Thank you

@sheema

@manish-sharma

---

<div class="post-metadata">

**Author:** ![Cyrus-Gilani](https://avatars.discourse-cdn.com/v4/letter/c/77aa72/32.png) [@Cyrus-Gilani](https://forum.builder.io/u/Cyrus-Gilani)\
**Post date:** [November 16, 2025, 5:14am UTC](https://forum.builder.io/t/repeat-for-each-not-reacting-to-state-changes-in-builder-io/15911/5 "2025-11-16T05:14:17Z")

</div>

I found the solution, it was to use the $index value. Refer to this forum post for more detail: [Bind dynamically localizedlist item’s value - Technical Questions - Builder.io Forum](https://forum.builder.io/t/bind-dynamically-localizedlist-items-value/1990)