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

Easy Data fetching in React

Add Answer

syde fect answered on January 4, 2022 Popularity 7/10 Helpfulness 2/10

answer Easy Data fetching in React

related fetch data from api in react

related how to data fetch in react

related Fetching data with React

related react fetch data

Easy Data fetching in React

Comment

import { Suspense } from 'react';

async function fetchData( ) {
	const response = await
	fetch('https://api.example.com/data');
	return await response.json();
}
function MyComponent( ) {
	const data = use(fetchData);

return (
	<Suspense fallback={<div>Loading data ...< /div>}>
		<div>
		<h1>My Data</h1>
		<p>{data.message}</p>
		</div>
	</Suspense>
	);
}

Popularity 7/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on May 09 2024

syde fect

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

how to data fetch in react

Comment

import {useEffect,useState} from 'react'

const App = () => {
  const [data,setData] = useState([])

  useEffect(()=>{
    fetch('https://fakestoreapi.com/products').then(res => res.json()).then(data => {
      setData(data);
    }).catch(e=>console.log(e.message));
  },[])

   console.log(data);

  return (
    <div>
      {data.map(i => <p key={i.id}>{i.title}</p> )}
    </div>
  )
}

export default App

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: fetch fetc

Link to this answer
Share Copy Link

Contributed on Nov 13 2022

WinMaw

0 Answers Avg Quality 2/10

Fetching data with React

Comment

// mycomponent.js
import React, { useEffect, useState} from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([])

  useEffect(() => {
    const fetchData = async () =>{
      setLoading(true);
      try {
        const {data: response} = await axios.get('/stuff/to/fetch');
        setData(response);
      } catch (error) {
        console.error(error.message);
      }
      setLoading(false);
    }

    fetchData();
  }, []);

  return (
    <div>
    {loading && <div>Loading</div>}
    {!loading && (
      <div>
        <h2>Doing stuff with data</h2>
        {data.map(item => (<span>{item.name}</span>))}
      </div>
    )}
    </div>
  )
}

export default MyComponent;

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: dev.to

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 03 2022

serge kalaga

0 Answers Avg Quality 2/10

react fetch data

Comment

import { useState, useEffect } from 'react'

const App = () => {
	const [data, useData] = useState(null);
    useEffect(() => {
    	const url = 'endpoint url';
        fetch(url)
        	.then(res => res.json())
            .then(data => setData(data))
    };
    return (
    	<div id='App'>
        	{ data && <p>data.id</p> }
        </div>
    );
};
export default App

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: fetch fetc

Link to this answer
Share Copy Link

Contributed on Apr 05 2023

Shah Solayman Sinha

0 Answers Avg Quality 2/10

Easy Data fetching in React

Contents

More Related Answers

Easy Data fetching in React

Closely Related Answers

fetch data from api in react

how to data fetch in react

Fetching data with React

react fetch data

Grepper

Documentation

Social

Legal

Contact

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