1

I'm trying to prepare a restfulpi at reactjs. But because I'm new to reactjs and I'm not very fluent in English, I have encountered a problem. the purpose of my application is to list the books of a publisher. you can access my code and error from below. I can do it if you help me. Thank you.

Error:

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

My Codes:

`` ` 
class App extends Component {
  state = {
    books:[]
  }
  componentWillMount(){
    axios.get('http://localhost:3000/books').then(( response)=>{
    this.setState({
      books: response.data
    })
    });
  }``

`` ` 
render() {
    let books = this.state.books.map((book) =>
    {
      return
      (
        <tr key={book.id}>
          <td>{book.id}</td>
          <td>{book.title}</td>
          <td>{book.rating}</td>
          <td>
            <Button color="success" size="sm" className="mr-2">Edit </Button>&nbsp;
            <Button color="danger" size="sm">Sil</Button>
          </td>
      </tr>
      )
    });``

`` ` 
 return (
  <div className="App container">
  <h1>Book List</h1><br></br>
  <Table> 
    <thead>
      <tr>
        <th>#</th>
        <th>Title</th>
        <th>Rating</th>
        <th>Actions</th>

      </tr>
    </thead>
    <tbody>
      {books}
    </tbody>
  </Table>

  </div>
);``
Atakan
  • 29
  • 1
  • 1
  • 6

2 Answers2

1

You are missing the return statement in your render method.

render() {
     ....
     ...

   return (
      <tbody>
        {books}
      </tbody>
   )
}
Sushanth --
  • 55,259
  • 9
  • 66
  • 105
1

Try this:

render() {
  const books = this.state.books.map(book => {
    return (
      <tr key={book.id}>
        <td>{book.id}</td>
        <td>{book.title}</td>
        <td>{book.rating}</td>
        <td>
          <Button color="success" size="sm" className="mr-2">
            Edit{' '}
          </Button>
          &nbsp;
          <Button color="danger" size="sm">
            Sil
          </Button>
        </td>
      </tr>
    );
  });

  return <tbody>{books}</tbody>;
}

According to this answer it is a common mistake in the render function.

J D
  • 73
  • 1
  • 1
  • 7
  • I fixed it like you said, but I still have the problem. – Atakan Mar 29 '19 at 20:46
  • Try copying my render method and replace yours with it. In your original post you have plenty of syntax errors, namely around returning from the render method, but I assume it's due to copy-pasting the pieces in parts. If you update the post with the entire React component (the whole file), we might be able to catch something else. Also, which line is line 21 in your editor? – J D Mar 29 '19 at 22:02