Linting in React

Question

I am learning React.js. I am developing an app. My code is like below

<div className="ui pagination menu">
            <span
              className={
                this.props.page === 1
                  ? 'disabled item pagination'
                  : 'item pagination'
              }
              onClick={() => {
                if (this.props.page === 1) {
                  return false;
                }
                this.pagination(this.props.page - 1);
              }}
            >
              ❮
            </span>
            <div className="item">
              Page {this.props.page} of {this.props.maxPages}
            </div>
            <span
              className={
                this.props.page === this.props.maxPages
                  ? 'disabled item pagination'
                  : 'item pagination'
              }
              onClick={() => {
                if (this.props.page === this.props.maxPages) {
                  return false;
                }
                this.pagination(this.props.page+1); 

                <h1 className="ui attached warning message table">  // Line 185
                  <span id="address">Addresses</span>
                  <span id="user_details">
                    Welcome,  <b> { this.state.userName } </b>  |
                    <span id="logout" onClick={this.logout}> Logout </span>
                    <button className="ui teal button" onClick={this.openPopup}> <i className="plus square icon" />
                      Add Address
                    </button>
                  </span>
                </h1>
              {this.props.addresses.length > 0 ? (

I am getting Warning like below

Line 185:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Could anyone say how can I solve the Warning ?

Answer 1

I think you have missed closing of onClick function before your line 185 , you should do this,

<span
  className={
      this.props.page === this.props.maxPages
      ? 'disabled item pagination'
      : 'item pagination'
  }
  onClick={() => {
    if (this.props.page === this.props.maxPages) {
        return false;
    }
    this.pagination(this.props.page+1); 
}} //This is missing
> //closing of span is also missing
<h1 className="ui attached warning message table">  // line 185

Answer 2

I believe you are missing the closing statement for the onClick. It may be helpful to use and IDE and install prettier. This will help you see where you are missing syntax. Additionally, here is more information on the rational for the error:

http://linterrors.com/js/expected-an-assignment-or-function-call