> ## Documentation Index
> Fetch the complete documentation index at: https://developer.suki.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Dynamic Encounter

> Learn how to dynamically set the encounter data in the Suki React Web SDK

This example shows how to dynamically set the encounter data in the Suki React Web SDK. Encounter data contains patient and provider information. You pass it to the `SukiAssistant` component to pre-populate the React Web SDK.

**Identifiers:**

* **`patient.identifier`** is required and must be **at most 36 characters** (<Tooltip tip="VARCHAR is a variable-length SQL string type. varchar(36) caps these identifiers at 36 characters. See the Glossary." cta="View in Glossary" href="/Glossary/v#varchar-36">varchar(36)</Tooltip>).
* **`encounter.identifier`** is optional; if you set it, use the same **36-character** limit (<Tooltip tip="VARCHAR is a variable-length SQL string type. varchar(36) caps these identifiers at 36 characters. See the Glossary." cta="View in Glossary" href="/Glossary/v#varchar-36">varchar(36)</Tooltip>).

**Dynamic encounter:**

You can update the **`encounter`** prop after the component loads. When you pass new encounter data, the Web SDK updates it automatically for note generation.

## Code example

The example below demonstrates how to dynamically set the encounter data in the Suki React Web SDK.

<CodeGroup>
  ```jsx React expandable theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
  import { SukiAssistant, SukiProvider, useSuki } from "@suki-sdk/react";

  function DynamicEncounterComponent() {
    const [currentEncounter, setCurrentEncounter] = useState(initialEncounter); // Replace with your initial encounter data

    const switchToNewPatient = () => {
      const newEncounter = {
        identifier: "6ec3920f-b0b1-499d-a4e9-889bf788e5ab", // max 36 characters
        patient: {
          identifier: "905c2521-25eb-4324-9978-724636df3436", // max 36 characters
          name: {
            use: "usual",
            family: "Wilson",
            given: ["Emma"],
            suffix: [],
          },
          birthDate: "1992-07-10",
          gender: "female",
        },
      };

      setCurrentEncounter(newEncounter);
    };

    return (
      <SukiProvider>
        <div>
          <button onClick={switchToNewPatient}>Switch to New Patient</button>

          <SukiAssistant
            encounter={currentEncounter}
            // rest of the props
          />
        </div>
      </SukiProvider>
    );
  }
  ```
</CodeGroup>

## Next steps

<Icon icon="file-lines" iconType="solid" /> Refer to [Ambient events](/web-sdk/guides/ambient) to learn more about how to track and manage ambient interactions in the web SDK.