ReactJS is no Rendering Component

Question

I took this all from this example. Creating a React Login Page

So I cannot take any credit. However, this page works fine. I am trying to retro fit it to pushing a React Video Player page.

My code is as follows (Snippet from Axios Post):

 if (response.status == 200) {
                console.log("Login successfull");

                var videoPlayer = [];
                this.setState( {isLoggedIn : true });
                videoPlayer.push(<Videoplayer appContext={self.props.appContext} parentContext={this} />);
                self.props.appContext.setState({loginPage: [], videoPlayer: videoPlayer});

The existing code was this:

var uploadScreen=[];
                uploadScreen.push(<UploadScreen appContext={self.props.appContext}/>);
                self.props.appContext.setState({loginPage: [], uploadScreen: uploadScreen})
render() {
  var browserHistory = createBrowserHistory();

  if(this.state.isAuthenticated) {
    return <Redirect to={'/VideoPlayer '}/>
  }
  return(
      //<Router history={ browserHistory }>
      //<Route path="/VideoPlayer" component={() => <VideoPlayer title="Arlo Video" style="home-header"/> }/>
      <div>
            <MuiThemeProvider>
                <div>
                    <AppBar
                        title="Login"
                    />
                    <TextField
                        hintText="Enter your Username"
                        id = "username"
                        floatingLabelText="Username"
                        onChange={(event, newValue) => this.setState({username: newValue})}
                    />
                    <br/>
                    <TextField
                        type="password"
                        id = "password"
                        hintText="Enter your Password"
                        floatingLabelText="Password"
                        onChange={(event, newValue) => this.setState({password: newValue})}
                    />
                    <br/>
                    <RaisedButton label="Submit" primary={true} style={style}
                                  onClick={(event) => this.handleClick(event)}/>
                </div>
            </MuiThemeProvider>
        </div>
     // </Router>
  )
}

}

My code does not render the VideoPlayer Page and that code is from the standard example at this github

ReactJS Video Player

I have a feeling that it has to do with Context but I don't know enough about React or how to debug this using the Chrome tools. My backend is Django. I'm almost thinking of going back to using Jquery so I can get pages at least functioning but wanted to try and learn React.

Any help would be great. The code above is just testing code so I could get some thing functional.

Do you have a router with route set to display when the url is /videoplayer? And what happens when the authentication is succeessful? Does the url change to /videoplayer? — Rohith Murali, May 05 '18 at 02:17
I took off router for now. It appears this is related to setState. https://stackoverflow.com/questions/24718709/reactjs-does-render-get-called-any-time-setstate-is-called — Axwack, May 05 '18 at 12:12

Bhojendra Rauniyar · Answer 1 · 2018-05-04T18:12:27.190

0

Updating the state by returning null, empty array [] or any initial value will not re-render the component. You need to change the state value to something else and then only the component will be re-rendered.

You may also take care of setState will not re-render the component when shouldComponentUpdate hook returns false.

edited May 04 '18 at 18:12

answered May 04 '18 at 18:07

Bhojendra Rauniyar

83,432
35
168
231

I'm not sure where you are seeing that. The code makes the login page array null and then sets the videoPlayer [] to videoPlayer. Can you tell me where you are referring to? – Axwack May 04 '18 at 19:32

score 0 · Answer 2 · answered May 05 '18 at 17:30

0

The offending code was the following:

 AppContext={self.props.appContext}

Which was a typo to this:

videoPlayer.push(<Videoplayer appContext={self.props.appContext} parentContext={this} />)

answered May 05 '18 at 17:30

Axwack

569
1
8
26

ReactJS is no Rendering Component

2 Answers2