Change Renderer, Scene, and Camera on Window Resize

[joelcdoyle]

I'm not sure how to make the renderer, scene, and camera resize with the window. I've used state to set the properties for each element:

class MyStage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      width: window.innerWidth - 10,
      height: window.innerHeight -10
    };

    window.addEventListener("resize", () => {this.updateSize();});
  }

  updateSize() {
    this.setState({
      width: window.innerWidth - 10,
      height: window.innerHeight -10
    });
    //this.forceUpdate();
  }

  render() {
    return (
     <Renderer width={this.state.width} height={this.state.height}>
      <Scene width={this.state.width} height={this.state.height}>
        <PerspectiveCamera aspect={this.state.width/this.state.height}/>
        {this.props.children}
      </Scene>
    </Renderer>);
  }
}

And added a method to update state, but the size of the canvas never changes. I've tried adding a call to forceUpdate but it also has no effect. Canvas, scene, camera, and renderer are always the same size as when the page was first loaded. Scaling the browser window has no effect.

I have stepped through the code to ensure that the state change is being executed.

[joelcdoyle]

I solved this on my own. Definitely not an issue with react-three, just bad programming. Sorry for treating issues section like StackOverflow.