JAVASCRIPT

axios with load more

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;