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

Fetching data with React

Add Answer

serge kalaga answered on January 4, 2022 Popularity 10/10 Helpfulness 4/10

answer Fetching data with React

related fetch data from api in react

related fetch request in react

related how to data fetch in react

related react fetch data

related Easy Data fetching in React

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

Link to this answer
Share Copy Link

Contributed on Jun 03 2022

serge kalaga

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

fetch request in react

Comment

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://example.com/api/data');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default MyComponent;

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: chat.openai.com

Tags: fetch fetc

Link to this answer
Share Copy Link

Contributed on Jun 19 2023

Good Gemsbok

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

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

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 8/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

Fetching data with React

Contents

More Related Answers

Fetching data with React

Closely Related Answers

fetch data from api in react

fetch request in react

how to data fetch in react

react fetch data

Easy Data fetching in React

Grepper

Documentation

Social

Legal

Contact

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