Getting Json using Axios and iterating over data in ReactStrap Table

Question

I am trying to get data from jsonplaceholder via axios and iterate over that data and put that data into a reactstrap table. I am getting the error: Expected an assignment or function call and instead saw an expression. I'm not entirely sure what I am doing wrong here. Any help is greatly appreciated.

Here is my code:

render() {
    const data = axios.get("https://jsonplaceholder.typicode.com/todos")
      .then(response =>
        this.data = response.data,
        this.data.forEach((item) => {
          <tr>
            <td>{item.userId}</td>
            <td>{item.id}</td>
            <td>{item.title}</td>
            <td>{item.completed}</td>
          </tr>
        })
      )
    return (
      <div className="App">
        <header className="App-header">
          <Table>
            <thead>
              <tr>
                <th>
                  User ID
                </th>
                <th>
                  ID
                </th>
                <th>
                  Title
                </th>
                <th>
                  Completed
                </th>
              </tr>
            </thead>
            <tbody>
              {
                data
              }
            </tbody>
          </Table>
        </header>
      </div>
    );
  }
}

The error is where I try to create the table row <tr> tags in my data variable.

Answer 1

The mistake is here:

axios.get('https://jsonplaceholder.typicode.com/todos').then(response => {
  console.log(response);
  this.setState({
    todos: response.data, // you have it as this.data not response
  });
});

Answer 2

You should use lifecycle methods to load your data from API and store them in a state and render them when the state is updated.

Try this

import React, { Component } from 'react';
import axios from 'axios';

class Example extends Component {

  constructor(props) {
    super(props);

    this.state = {
      todos: []
    }
  }

  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/todos")
      .then(response => {
        this.setState({
          todos: this.data
        });
      })
  }

  render() {
    const { todos = [] } = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <Table>
            <thead>
              <tr>
                <th>User ID</th>
                <th>ID</th>
                <th>Title</th>
                <th>Completed</th>
              </tr>
            </thead>
            <tbody>
            {todos.length ? 
              todos.map(todo => (
                <tr>
                  <td>{todo.userId}</td>
                  <td>{todo.id}</td>
                  <td>{todo.title}</td>
                  <td>{todo.completed}</td>
                </tr>
              ))
              : 
              (<tr>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
              </tr>)
            }
            </tbody>
          </Table>
        </header>
      </div>
    );
  }
}

export default Example;