JAVASCRIPT

how to fetch api in reactjs using axios

//fetch api by using axios library//


import React, { Fragment, useState, useEffect } from 'react';
import axios from 'axios';
 
function App() {
  const [data, setData] = useState({ hits: [] });
  const [query, setQuery] = useState('redux');
 
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1/search?query=redux',
      );
 
      setData(result.data);
    };
 
    fetchData();
  }, []);
 
  return (
    <Fragment>
      <input
        type="text"
        value={query}
        onChange={event => setQuery(event.target.value)}
      />
      <ul>
        {data.hits.map(item => (
          <li key={item.objectID}>
            <a href={item.url}>{item.title}</a>
          </li>
        ))}
      </ul>
    </Fragment>
  );
}
 
export default App;

how to fetch data from react using axios

useEffect(()=>{
    axios.get(`http://localhost:5000/products`).then((response) => {
        console.log(response);
        //setProducts(response.data)
      });
},)

fetch data with axios in reactjs

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

const View = _ => {
    const [posts, setPosts] = useState([])

    const url = "https://mrcrudapp.herokuapp.com/api/getallposts"

    const postings = async () => {
        try{
            const res = await axios.get(url)
            setPosts(res.data.data)
        } catch (error) {
            console.log('error')
        }
    }

    useEffect( () =>  postings(), [])

    return (
        <>
        <h1>Posts</h1>
        { posts && posts.map((myPost) =>
            <ul key={myPost._id}>
                <li>{myPost.title} : {myPost.content}</li>
            </ul>
        )}
        </>
    )
}

export default View