React - Expected an assignment or function call and instead saw an expression failed to compile

Question

So I have this TODO List App with laravel backend and React and when I nom start my React App it shows me this:

./src/List.js
  Line 126:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.

Anyone have idea why is this happening? I tried everything but nothing happens, and I'm new to React, I followed tutorial for this with Laravel API routes and React js frontend

Here is my List.js:

import React, { Component } from "react";
import { getList, addItem, deleteItem, updateItem } from "./ListFunctions";

class List extends Component {
  constructor() {
    super();
    this.state({
      id: "",
      title: "",
      editDisabled: false,
      items: []
    });
    this.onSubmit = this.onSubmit.bind(this);
    this.onChange = this.onChange.bind(this);
  }
  componentDidMount() {
    this.getAll();
  }
  onChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };
  getAll = () => {
    getList().then(data => {
      this.setState(
        {
          title: "",
          items: [...data]
        },
        () => {
          console.log(this.state.items);
        }
      );
    });
  };

  onSubmit = e => {
    e.preventDefault();
    addItem(this.state.title).then(() => {
      this.getAll();
    });
    this.setState({
      title: ""
    });
  };

  onUpdate = e => {
    e.preventDefault();
    addItem(this.state.title, this.state.id).then(() => {
      this.getAll();
    });
    this.setState({
      title: "",
      editDisabled: ""
    });
    this.getAll();
  };

  onEdit = (itemid, e) => {
    e.preventDefault();

    var data = [...this.state.items];
    data.forEach((item, index) => {
      if (item._id === itemid) {
        this.setState({
          id: item.id,
          title: item.title,
          editDisabled: true
        });
      }
    });
  };

  onDelete = (val, e) => {
    e.preventDefault();
    deleteItem(val);
    this.getAll();
  };

  render() {
    return (
      <div className="col-md-12">
        <form onSubmit={this.onSubmit}>
          <div className="form-group">
            <label htmlFor="title">Title</label>
            <div className="row">
              <div className="col-md-12">
                <input
                  type="text"
                  className="form-control"
                  id="title"
                  name="title"
                  value={this.state.title || ""}
                  onChange={this.onChange.bind(this)}
                />
              </div>
            </div>
          </div>
          {!this.state.editDisabled ? (
            <button
              type="submit"
              className="btn btn-success btn-block"
              onClick={this.onSubmit.bind(this)}
            >
              Submit
            </button>
          ) : (
            ""
          )}
          {this.state.editDisabled ? (
            <button
              type="submit"
              onClick={this.onUpdate.bind(this)}
              className="btn btn-primary btn-block"
            >
              Update
            </button>
          ) : (
            ""
          )}
        </form>
        <table className="table">
          <tbody>
            {this.state.items.map((item, index) => {
              <tr key={index}>
                <td className="text-left">{item.title}</td>
                <td className="text-right">
                  <button
                    href=""
                    className="btn btn-info mr-1"
                    disabled={this.state.editDisabled}
                    onClick={this.onEdit.bind(this, item.id)}
                  >
                    Edit
                  </button>
                  <button
                    href=""
                    className="btn btn-danger"
                    disabled={this.state.editDisabled}
                    onClick={this.onEdit.bind(this, item.id)}
                  >
                    Delete
                  </button>
                </td>
              </tr>;
            })}
          </tbody>
        </table>
      </div>
    );
  }
}

export default List;

And Line 126: is the line after

          <tbody>
            {this.state.items.map((item, index) => {

That is line 126. Please help

Answer 1

You can also leave bind as long as you use arrow functions for method declaration like onEdit = event => { and not function onEdit(event). Just use the following pattern instead:

  onEdit = event => {
     ...
     const { target: { id } } = event;
     this.setState({ id });
  }

  render(){
    return (
      ...
      <button id={item.id} onClick={this.onEdit}>
      ...
     )
   }

Answer 2

You need to explicitly return your jsx

      {this.state.items.map((item, index) => {
          return(
           <tr key={index}>
            <td className="text-left">{item.title}</td>
            <td className="text-right">
              <button
                href=""
                className="btn btn-info mr-1"
                disabled={this.state.editDisabled}
                onClick={this.onEdit.bind(this, item.id)}
              >
                Edit
              </button>
              <button
                href=""
                className="btn btn-danger"
                disabled={this.state.editDisabled}
                onClick={this.onEdit.bind(this, item.id)}
              >
                Delete
              </button>
            </td>
          </tr>);
        })}

Also you're not binding state correctly.

constructor(){
   this.state = {
      id: "",
      title: "",
      editDisabled: false,
      items: []
 }
}

Answer 3

You are not returning anything on the map function:

{
  this.state.items.map((item, index) => {
    return (
      <tr key={index}>
        <td className="text-left">{item.title}</td>
        <td className="text-right">
          <button
            href=""
            className="btn btn-info mr-1"
            disabled={this.state.editDisabled}
            onClick={this.onEdit.bind(this, item.id)}
          >
            Edit
          </button>
          <button
            href=""
            className="btn btn-danger"
            disabled={this.state.editDisabled}
            onClick={this.onEdit.bind(this, item.id)}
          >
            Delete
          </button>
        </td>
      </tr>
    );
  });
}