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

axios with load more

Aftab Divan answered on March 21, 2022 Popularity 3/10 Helpfulness 2/10

answer axios with load more

axios with load more

Comment

import React, { useEffect, useState } from "react";
import axios from "axios";
import "./App.css";

const App = () => {
  const [data, setData] = useState([]);
  const [load, setLoad] = useState(10);
  const [flag,setFlag]=useState(true)

  const getData = async () => {
    const res = await axios.get("https://jsonplaceholder.typicode.com/posts");

    setData(res.data);
  };
  useEffect(() => {
    getData();
  }, [])

  const loadData = () => {
    setLoad((prev) => prev + 10)
  }

  return (
    <>
      <div className="data_div">
        {data.slice(0, load).map((item, index) => {
          {/* console.log(data.length) */}

          return (
            <div className="inner" key={index}>
              <h1>{item.id}</h1>
              <h3>{item.title}</h3>
              <p>{item.body}</p>
            </div>
          )
        })
        }
       
       
         {
             load < 100 && <button onClick={loadData}>Load more...</button>
           }
      </div>
    </>
  );
};

export default App;

Popularity 3/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: axios javascript load

Link to this answer
Share Copy Link

Contributed on Mar 21 2022

Aftab Divan

0 Answers Avg Quality 2/10

axios with load more

Contents

More Related Answers

axios with load more

Grepper

Documentation

Social

Legal

Contact

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