Sign in Get Started

how can we fetch data from api in using axios react

Test2 
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;
View another examples Add Own solution
Log in, to leave a comment

5
3
Collizo4sky 100 points 

                                    const users = data.map(u =&gt;
                    &lt;div&gt;
                    &lt;p&gt;{u.id}&lt;/p&gt;
                    &lt;p&gt;{u.name}&lt;/p&gt;
                    &lt;p&gt;{u.email}&lt;/p&gt;
                    &lt;p&gt;{u.website}&lt;/p&gt;
                    &lt;p&gt;{u.company.name}

                    &lt;/div&gt;
                    )
this.setState({users})


import React, {Component} from 'react'
import axios from '../../axios'

export default class users extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Users: []
        };
    }
    getUsersData() {
        axios
            .get(`/users`, {})
            .then(res =&gt; {
                const data = res.data
                console.log(data)
                const users = data.map(u =&gt;
                    &lt;div&gt;
                    &lt;p&gt;{u.id}&lt;/p&gt;
                    &lt;p&gt;{u.name}&lt;/p&gt;
                    &lt;p&gt;{u.email}&lt;/p&gt;
                    &lt;p&gt;{u.website}&lt;/p&gt;
                    &lt;p&gt;{u.company.name}&lt;/p&gt;
                    &lt;/div&gt;
                    )

                    this.setState({
                        users
                    })

            })
            .catch((error) =&gt; {
                console.log(error)
            })

    }
    componentDidMount(){
        this.getUsersData()
    }
    render() {

        return (
            &lt;div&gt;
                {this.state.users}
            &lt;/div&gt;
        )
    }
}

5 (3 Votes)
0
Are there any code examples left?
Find Add Code snippet
New code examples in category Javascript
SHOW MORE
Create a Free Account
Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.
Sign up
Develop soft skills on BrainApps
Complete the IQ Test
Relative searches
How to fetch data using API in React JS with Axios fetch https react js axios react display something different while axios is fetching fetching get api react using axios how to fetch in reacty with axios how to fetch using axios in react with an api key which is best axios or fetch in react js reactjs function fetch data to display axios reactjs fetch data to display axios why do you prefer axios to fetch in react&gt; how to fetch data from api in react axios getting data from axios get response react how to fetch data using axios in react how to use axios to fetch tha data and show the data into the table in react best way to fetch data in reatc with axios fetch data from api using axios react js axios get data from api react axios fetch react react component for axios fetches api fetching using axios in react js how to get data from api using axios in react js react ftch data with axios howto get api data in react by axios where to use fetch and axios in react react js fetch data from api using axios react axios fetch best practice to handle fetching data from axios in react reactjs axios fetch data reactjs axios fetch data from api reactjs axios get data from api react use axios instead of fetch axios fetching data react get data from api with axios react fetch data in component using axios react axios fetch request with react js how to get data from axios response react fetch single value using axios in react js fetch data in react component with axios react query fetch or axios axios syntax to fetch the data in react axios fetch api data and render in react native fetch api data in react native axios and render sample code fetch data from api using axios method in react native fetching api in react in axios axios fetch data react componentDidMount using axios to fetch data react how to fetch data with axios in react how to fetch data with function comp axios from backend to react how to fetch data with axios from backend to react how to fetch data from a post req axios in react reactjs axios fetch api example fetch axios with react fetch data by axios and set the data to state in react js fetch api by axios in react js fetch data from json using axios react axios data fetch in reactjs fetch data from json file in react axios fetch data from post using axios react axios in react js with data fetching fetch data react axios how to get data from database in react using axios fetch request with axios react reactjs fetch data using axios from web api react jsfetch data using axios from web api axios and react to fetch data from api fetch data by id using react js axios fetch by id using axios react js fetching data with axios react how to fetch api using axios in react is using fetch or axios better for react react axios get data from database axios and fetch react fetch react axios fetching response from api in react using fetch api axios fetch data real time using axios react fetch data with axios react react axios get data from api axios or fetch react how to return data fetch from api using axios in react native React native fetch data from API using axios example fetch axios react using axios to fetch data in react how to fetch object and array data using axios in react how to fetch data using axios in react consuming rest api in react with fetch and axios how to fetch data from api in react using axios in functional component how to fetch data from api in react using axios how to fetch data from api using axios in react function components how to fetch data from api using axios in react how to convert fetch into axios in react use axios to fetch data from an endpoint in react how to fetch data from api using axios in react native fetching datat with axios in extrnal function react? react axios fetch example react native fetch data using axios react js functional fetch axios react js functional fetch axio react axios fetch data example react query fetch data axios how to get data from api in react using axios react fetch data from api axios in React axios or fetch? react axios fetch data react fetch api axios fetching data with react axios Fetch API call in React js axios o fetch reactjs render after axios call fetch data fetch data in table axios react axios or fetch react which is better fetch data from api using axios react Fetching data from an API axios component axios react fetch fetch and axios in react return dom after axios fetch result react return after axios fetch result react react get data from api axios fetch data using axios in react example axios fetch request react react axios fetch api react how to fetch data with axios axios fetch in react how to get data without fetch and axios in react how to fetch limited records from api using axios in react axios in react fetch json and show axios fetch data react using axios to fetch data react componentdidmount fetch data using axios react fetch or axios in react react fetch axios react simple data fetching with axios how can we fetch data from api in using axios react
Made with love
This website uses cookies to make IQCode work for you. By using this site, you agree to our cookie policy

Welcome Back!

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign in
Recover lost password
Or log in with
Not registered?
Sign up takes less than a minute

Create a Free Account

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign up
Or sign up with
By signing up, you agree to the Terms and Conditions and Privacy Policy. You also agree to receive product-related marketing emails from IQCode, which you can unsubscribe from at any time.
Creating a new code example
Code snippet title
Source