# React widget not visible in Dock Panel
**URL:** https://discourse.jupyter.org/t/react-widget-not-visible-in-dock-panel/16035
**Category:** JupyterLab
**Tags:** how-to, help-wanted
**Created:** [September 30, 2022, 11:03am UTC](https://discourse.jupyter.org/t/react-widget-not-visible-in-dock-panel/16035 "2022-09-30T11:03:58Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Rakesh\_K](https://discourse.jupyter.org/u/Rakesh_K)
#### Post date: [September 30, 2022, 11:03am UTC](https://discourse.jupyter.org/t/react-widget-not-visible-in-dock-panel/16035/1 "2022-09-30T11:03:58Z")
I am trying to add a custom widget that extends `ReactWidget` in a `DockPanel`. However, when I add the widget using `addWidget()` method of DockPanel, the widget is not rendered on the screen. Upon inspecting the DOM, I found out that the widget is actually present in the DockPanel div but the height of this div is 0px. Adding a widget that extends `Widget` works just fine. Can someone explain why this might be happening? Also, how do I add a ReactWidget to DockPanel and show it correctly in the UI?
Thanks,
Rakesh.
---
### Author:  [@bollwyvl](https://discourse.jupyter.org/u/bollwyvl)
#### Post date: [September 30, 2022, 12:39pm UTC](https://discourse.jupyter.org/t/react-widget-not-visible-in-dock-panel/16035/2 "2022-09-30T12:39:39Z")
You can get a lot of value from wrapping your outer widget in a [MainAreaWidget](https://github.com/jupyterlab/jupyterlab/blob/a8f8e1f7dd63045a46e0bd159b0dff7512cce9ba/packages/apputils/src/mainareawidget.ts), which is used by almost all of the core JupyterLab panels.
For the “why”, you can have a look at its [style](https://github.com/jupyterlab/jupyterlab/blob/a8f8e1f7dd63045a46e0bd159b0dff7512cce9ba/packages/apputils/style/mainareawidget.css) to find some of the right things you need.
---
### Author:  [@Rakesh\_K](https://discourse.jupyter.org/u/Rakesh_K)
#### Post date: [October 5, 2022, 9:31am UTC](https://discourse.jupyter.org/t/react-widget-not-visible-in-dock-panel/16035/3 "2022-10-05T09:31:31Z")
Thank you @bollwyvl for the response. I didn’t quite understand which outer widget you meant when you suggested to wrap in `MainAreaWidget`. Is it the `ReactWidget` derived widget or the `DockPanel` itself? I tried different permutations of wrapping them in the `MainAreaWidget` as suggested but it didn’t work out. Could you please elaborate a bit more on your earlier suggestion?
Thanks,
Rakesh.
---
### Author:  [@bollwyvl](https://discourse.jupyter.org/u/bollwyvl)
#### Post date: [October 5, 2022, 1:16pm UTC](https://discourse.jupyter.org/t/react-widget-not-visible-in-dock-panel/16035/4 "2022-10-05T13:16:22Z")
Have a look for `MainAreaWidget` usage patterns [in the jupyterlab source](https://github.com/jupyterlab/jupyterlab/search?q=mainareawidget) .
An untested example:
```auto
const content = new MyReactWidget();
content.addClass('xyz-my-widget');
const wrapper = new MainAreaWidget({content})
wrapper.title.label = "My Widget";
wrapper.addClass('xyz-my-wrapper');
app.shell.add(wrapper, 'main');
```
This will give you a well-styled outer widget that will size up properly in the `DockPanel`, and then you can style things further. A starting point to fill the panel might be:
```auto
.xyz-my-wrapper {
display: flex;
flex-direction: column;
}
.xyz-my-wrapper .xyz-my-widget {
flex: 1;
}
```