${carName || "Ford Mustang"}
${carInfo.engine}
${carInfo.additionalInfo}
${carInfo.features}
`
}
```
This block of code has `renderWidget` function that is responsible for rendering the widget into the DOM.
* It receives a `companion` object as a parameter, which contains the data that will be passed to the widget.
* Inside the function, `ReactDOM.render()` is used to render the `WidgetComponent` and inject it into the DOM element returned by `window.loader.container()`.
* The `companion` object is passed as a prop to the `WidgetComponent`, allowing it to use that data when rendering its content.
```javascript
function renderWidget(companion) {
ReactDOM.render(
html`<${CarWidget} companion=${companion} />`,
window.loader.container()
)
}
```
The `unrenderWidget` function is responsible for **removing the rendered widget** from the DOM.
* It uses `ReactDOM.render()` to render an empty string (`""`), which essentially removes the existing content inside the container.
* The second argument, `window.loader.container()`, specifies the DOM element where the widget was originally rendered. This ensures that the content is removed from the same location.
```javascript
function unrenderWidget() {
ReactDOM.render("", window.loader.container())
}
```
This method **`window.loader.register`** is used to register the widget with a loader, allowing it to be managed dynamically (e.g., shown or removed based on some conditions).
* **`"show_car"`**: This is the name or identifier for the widget. It's essentially a label that the loader will use to recognize and manage this widget.
* **`renderWidget`**: This is the function that will be called when the widget needs to be rendered (i.e., displayed on the page). It contains the logic to inject the widget into the DOM.
* **`unrenderWidget`**: This is the function that will be called when the widget needs to be removed from the page. It contains the logic to clear the widget from the DOM.
```jsx
window.loader.register("show_car", renderWidget, unrenderWidget)
```
{% endstep %}
{% step %}
Complete the required fields
When a valid JavaScript file for the widget has been attached, an input field will appear displaying the identifier name of the widget that has been configured in the file:
