2

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

3 Answers 3

3

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: []
 }
}
Sign up to request clarification or add additional context in comments.

5 Comments

Okay something happened. But now it shows me this: TypeError: this.state is not a function. (In 'this.state({ id: "", title: "", editDisabled: false, items: [] })', 'this.state' is undefined) It's Line 7 under constructor, it said that this.state is undefined ...
use this.state = {... in your constructor.
You're not binding the state. I've updated the answer
Okay now it worked! Thank you! Now I have some other issues but I won't bother you guys with that
Make another question
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}>
      ...
     )
   }

Comments

0

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>
    );
  });
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.