“预期作业但找到了表达方式”

Question

I'm working on a project with my classmates, but while trying to load this page in react I get the error: "Expected an assignment or function call and instead saw an expression" that's appeared on several of her pages. I looked into it and it seems to be a warning that ES Lint throws out, but I'm unsure of how to fix it for my particular issue. Any help would be appreciated.

Code Snippet::

import React from "react";
import './LoginPage.css';
import GlobalNav from '../../components/GlobalNav';

import GlobalFooter from '../../components/GlobalFooter/GlobalFooter';

const LoginPage = props => {

<div>

<GlobalNav />

<h1 className="uk-text-center blueText">login</h1>
<div className="uk-container"/>
<form className="authorForm uk-width-1-2@m uk-align-center uk-form-stacked">

<p className="uk-text-lead">Login and add some Highlights of your own.</p>

 <p className="uk-text-center redText"><span uk-icon="bolt"></span></p>

<fieldset className="uk-fieldset">
<div className="form-group">

<div className="uk-margin">

<label className="uk-form-label" for="form-stacked-select">* Email:</label>
 <div className="uk-inline uk-width-1-1">
 <span className="uk-form-icon uk-form-icon-flip blueText" uk-icon="icon: world"></span>
 <input className="uk-input" id="email" name="email" type="text"></input>
   </div>
 </div>

<div className="uk-margin">
 <label className="uk-form-label" for="form-stacked-select">* Password:</label>
 <div className="uk-inline uk-width-1-1">
 <span className="uk-form-icon uk-form-icon-flip blueText" uk-icon="icon: lock"></span>
<input className="uk-input" id="password" name="password" type="text"></input>
</div>
</div> 

 <button className="uk-button uk-button-secondary redText uk-align-center" id="submit-btn"><span uk-icon="user"></span>&nbsp; login</button>

 </div>

 </fieldset>

</form>

 <GlobalFooter />

 </div>
}

export default LoginPage;

Answer 1

You forgot to enclose them in a return statement.

const LoginPage = props => {
  // this is where you put your logic if needed before returning JSX codes
  return (
    <div>
      // ...rest of the codes
    </div>
  );
};

or, you can simply do this, since you're using ES6 arrow function:

const LoginPage = props => (
  <div>
    // ...rest of the code
  </div>
);