Question: I'm having a problem with a Blockly workspace inside a Bootstrap modal.

Everything seems to work fine, but I cannot type in the inputs that I drag into the workspace.

Here's what the dialog looks like:

[![enter image description here](https://i.stack.imgur.com/ygPwZ.jpg)](https://i.stack.imgur.com/ygPwZ.jpg)

I cannot type in the highlighted block, to the right of the equal sign.

I had a problem previously where the workspace would not show if rendered inside a collapsed `div`. I fixed this by adding an event which fires when *Step Formulas* is clicked and execute the following code:

```
window.dispatchEvent(new Event('resize'));

```

I validated that if I place the `div` in which the workspace is injected into the main layout's HTML, it works fine. I can type.

Any ideas?

Answer: 
You can call it in `componentDidMount`. It guarantees that it will be called once and right after when component will be mounted. More over from [React Docs](https://reactjs.org/docs/react-component.html#componentdidmount):

> 
> If you need to load data from a remote endpoint, this is a good place
>  to instantiate the network request.
> 
> 
> 

```
getGameMeta(){
    fetch(Url).then(data => {
        console.log(data);
        this.setState({
            name: data[0].name
        });
    });
};

componentDidMount(){ this.getGameMeta() }

```

So seems like this is the way you are looking for
You can simply use useEffect if you are using a functional component.
basically, it loads the data before rendering your UI.

```
import {useEffect} from "react";
const GameData=()=>{
const [fetchD,setFetchD]=useState("");
 useEffect(()=>{
     fetch(Url).then(data => {
    console.log(data);
    setFetchD(data[0].name);
    });
});
 })
}
export default GameData;

```

//you can also check react documentation at <https://reactjs.org/docs/hooks-effect.html>