> ## 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

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 for React Web SDK

The example below demonstrates how to change encounter data using React state:

<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.