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;

Add code to your question, so others can understand it properly — Abhay Sehgal
– Abhay Sehgal, Commented Feb 11, 2021 at 17:04
<p>data {items}</p> here you're trying to render an object — Roberto Zvjerković
– Roberto Zvjerković, Commented Feb 11, 2021 at 17:35
yes im trying but fail, here the error fetch.then.then.setState.isLoaded 32 | .then((res) => res.json()) 33 | .then( 34 | (result) => { > 35 | this.setState({ | ^ 36 | isLoaded: true, 37 | items: result, 38 | }); — Ali_Cradle
– Ali_Cradle, Commented Feb 11, 2021 at 17:46

Gabriele Petrioli · Accepted Answer · 2021-02-11 17:38:51Z

2

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

answered Feb 11, 2021 at 17:38

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ali_Cradle Over a year ago

thanks @Gabriele Petrioli its work. Can it work for PUT & DELETE method too?

Gabriele Petrioli Over a year ago

@Ali_Cradle sure.

Collectives™ on Stack Overflow

Fetch Array data from API ReactJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related