Fetch Data in React Cheat Code

import { useState, useEffect } from 'react';

const url = 'https://course-api.com/react-tours-project';

function App() {
  const [tours, settours] = useState([])
  const [loading, setloading] = useState(true)

  // fetching data
  useEffect(() => {
    fetch(url)
    .then(response => {
      if(response.ok){
        return response.json()
      }
      throw response;
    })
    .then(tours => {
      settours(tours);
    })
    .catch(error => {
      console.error("Error Fetching",error);
    })
    .finally(()=>{
      setloading(false)
    })
  }, [])

if(loading){
    return(
      <main>
        <Loading/>
      </main>
    )
  }

  return (
    <div className="App">
     <Tours/>
    </div>
  );
}

export default App;

import { useState, useEffect } from 'react';

const url = 'https://course-api.com/react-tours-project';

function App() {
  const [tours, settours] = useState([])
  const [loading, setloading] = useState(true)

  // fetching data
  useEffect(() => {
  axios(url)
  .then(response =>{
    settours(response.tours)
  })
  .catch(error => {
    console.error("Error Fetching",error);
  })
    .finally(() => {
      setloading(false)
    })
}, [])

if(loading){
    return(
      <main>
        <Loading/>
      </main>
    )
  }

  return (
    <div className="App">
     <Tours/>
    </div>
  );
}

export default App;

import { useState, useEffect } from 'react';

const url = 'https://course-api.com/react-tours-project';

function App() {
  const [tours, settours] = useState([])
  const [loading, setloading] = useState(true)

  // fetching data

const fetchTours = async () => {
  setloading(true)
  try{
    const response = await fetch(url)
    const tours = await response.json()
    setloading(false)
    settours(tours)
  }catch(error){
    setloading(false)
    console.log(error)
  }
}

useEffect(() => {
  fetchTours()
}, [])

if(loading){
    return(
      <main>
        <Loading/>
      </main>
    )
  }

  return (
    <div className="App">
     <Tours/>
    </div>
  );
}

export default App;