---
title: "Load an entity"
slug: "load-an-entity"
abstract: "A code example showing how to configure the external component to load an entity using the setEntitySource method."
---
# Load an entity

This example shows how an **External** component can be used to load a specified entity into a details component using the `setEntitySource` method. The **External** component displays the text *Click here to set the default AssetMedia ID*. After you click the word *here*, the `setEntitySource` method is executed. The details component then displays the `AssetMedia` entity with an ID of 1016. This example assumes the details component is configured to display `AssetMedia` entities.

```typescript
import ReactDOM from "react-dom";
 import React from "react";
 const OptionsContext = React.createContext<any>(null);
 export default function createExternalRoot(container: HTMLElement) {
   return {
     render(context: any) {
       const { api, config, options } = context;
       ReactDOM.render(
         <OptionsContext.Provider value={options}>
           <OptionsContext.Consumer>
             {(options) => {
               return (
                 <>
                   <>
                     Click{" "}
                     <a
                       href="#"
                       onClick={() => {
                         api.details.setEntitySource(config.identifier, 1016);
                       }}

                       here
                     </a>{" "}
                     to set the Default AssetMedia id.
                   </>
                 </>
               );
             }}
           </OptionsContext.Consumer>
         </OptionsContext.Provider>,
         container
       );
     },
     unmount() {
       ReactDOM.unmountComponentAtNode(container);
     },
   };
 }

```