Search code examples
javascriptreactjscreate-react-app

React Component is blank in the webpage


I created a Reactjs app by create-react-app.

... but the components are not shown in the page, I think it is probably because App.js is not rendering the components?

Here is my code:

App.js

import React, { Component } from 'react';
import './App.css';
import login from "./containers/login/login";
class App extends Component {
        render() {
            return (
                    <div className="App">
                            <login/>
                    </div>
            );
        }
}
export default App;

/containers/login/login.js

import React, { Component } from 'react';
import "./login.css";

class login extends Component {
        render() {
                return (
                        <div className="headings">
                                <form action="">
                                Username <br/>
                                <input type="text" name="userrname" />
                                <br/>
                                Password <br/>
                                <input type="password" name="password" />
                                <br/>
                                <input type="submit" value="Login" />
                                </form>
                        </div>
                );
        }
}
export default login;

The component in the browser is like this:

<login></login>

Solution

  • Your own component need to start with a capital letter, or Babel will treat them as strings.

    Rename the variable to Login and it will work.

    import Login from "./containers/login/login";
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <Login />
          </div>
        );
      }
    }