Breaking News: Grepper is joining You.com. Read the official announcement!

how to fetch api in class component react

Add Answer

Worrisome Weevil answered on January 4, 2022 Popularity 10/10 Helpfulness 4/10

answer how to fetch api in class component react

related fetch data from api in react

related In React how can fetch API

related how to fetch api in class component react

how to fetch api in class component react

Comment

//for functional components//


function MyComponent() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

  // Note: the empty deps array [] means
  // this useEffect will run once
  // similar to componentDidMount()
  useEffect(() => {
    fetch("https://api.example.com/items")
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result);
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  }, [])

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name} {item.price}
          </li>
        ))}
      </ul>
    );
  }
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: class fetch-api javascript

Link to this answer
Share Copy Link

Contributed on Mar 25 2022

Worrisome Weevil

0 Answers Avg Quality 2/10

Closely Related Answers

fetch data from api in react

Comment

useEffect(() => {
    const url = "https://api.adviceslip.com/advice";

    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        console.log(json);
      } catch (error) {
        console.log("error", error);
      }
    };

    fetchData();
}, []);

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: designcode.io

Tags: api

Link to this answer
Share Copy Link

Contributed on Jan 04 2022

Frail Fly

0 Answers Avg Quality 2/10

In React how can fetch API

Comment

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      if (response.ok) {
        const jsonData = await response.json();
        setData(jsonData);
      } else {
        throw new Error('Error: ' + response.status);
      }
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default MyComponent;

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: chat.openai.com

Tags: fetch-api fetc

Link to this answer
Share Copy Link

Contributed on Jun 23 2023

Deepak Singh

0 Answers Avg Quality 2/10

how to fetch api in class component react

Comment

//for calsses components//

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

  componentDidMount() {
    fetch("https://api.example.com/items")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (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 (
        <ul>
          {items.map(item => (
            <li key={item.id}>
              {item.name} {item.price}
            </li>
          ))}
        </ul>
      );
    }
  }
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: class clas

Link to this answer
Share Copy Link

Contributed on Mar 25 2022

Worrisome Weevil

0 Answers Avg Quality 2/10

how to fetch api in class component react

Contents

More Related Answers

how to fetch api in class component react

Closely Related Answers

fetch data from api in react

In React how can fetch API

how to fetch api in class component react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.