Fetch Array data from API ReactJS

Question

i try fetch array data from a API with token, the problem is i fail to render/bind to display,every time debug will show error message like this. Please guide me, im new to react, this is my 1st app. how to bind array to myadapater? error

here my code:

import React, { Component } from "react";
import ReactDOM from "react-dom";

const url = " "; //api customer
const token = " "; //token

class Client extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: undefined,
      isLoaded: false,
      items: []
    };

    this.getData = this.getData.bind(this);
  }
  componentDidMount() {
    this.getData();
  }

  getData() {
    return fetch(url, {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: "Bearer " + token
      }
    })
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      );
  }

  render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
          <p>data {items}</p>
          {items.map((items) => (
            <div>{items.name}</div>
          ))}
        </div>
      );
    }
  }
}
export default Client;

Answer 1

There is only one real issue.

The use of {items} in the render method. If you want to display the actual JSON try {JSON.stringify(items)} instead.

Besides that i would also not use the same name in the map. So instead of items for the map function i would use item since you are dealing with one of the items.

    <div>
      <p>data {JSON.stringify(items)}</p>
      {items.map((item) => (
        <div>{item.name}</div>
      ))}
    </div>

---

Additionally, since you only use getData in the componentDidMount you do not need to bind it in the constructor (that is required if you intent to pass that function to other component/functions outside of the current one)

And you also do not need to return anything for the getData function since you handle the result in the then handlers.

So,

class Client extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: undefined,
      isLoaded: false,
      items: []
    };
  }
  componentDidMount() {
    this.getData();
  }

  getData() {
    fetch(url, {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: "Bearer " + token
      }
    })
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      );
  }

  render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
          <p>data {JSON.stringify(items)}</p>
          {items.map((item) => (
            <div>{item.name}</div>
          ))}
        </div>
      );
    }
  }
}