Use the <ForEach> tag with the arr prop to iterate over arrays:

---
name: message-history
text_config:
  model_name: gpt-4
test_settings:
  props:
    messageHistory:
      - role: user
        message: Hello
      - role: assistant
        message: Hi there
---

<ForEach arr={props.messageHistory}>
  {(item) => (
    <>
      <If condition={item.role == "user"}>
        <User>{item.message}</User>
      </If>
      <ElseIf condition={item.role == "assistant"}>
        <Assistant>{item.message}</Assistant>
      </ElseIf>
    </>
  )}
</ForEach>

​
Best Practices

  1. Use meaningful variable names in loop expressions
  2. Keep loop logic simple and readable
  3. Use fragments (<>...</>) when returning multiple elements

Have Questions?

We’re here to help! Choose the best way to reach us: