dota2 | Python package for interacting with Dota 2 Game | Video Game library

import { useState , useEffect} from "react";
import 'semantic-ui-css/semantic.min.css'
import { Header, Button , Container, Image} from 'semantic-ui-react'
import dotalLogo from './dota2.png'

import React from "react";
import Loading from './loading'
const dataUrl = 'https://api.opendota.com/api/heroStats'

function App() {
 const [loading, setLoading] = useState(false)
 const [data, setData] = useState([])
 const [index, setIndex] = useState(0)

 const fecthApi = async () => {
   setLoading(true)
   try {
     const fetched = await fetch(dataUrl)
     const parsed = await fetched.json()
     setData(parsed)
     setLoading(false)
  
   } catch (error) {
     console.log('error')
     setLoading(false)
   }
 }

 useEffect(()=>fecthApi(),[])
 if (loading){
    return 
  }

  function nextBtn(e) {
    e.preventDefault()
    setIndex((prev)=>prev+1)
  }

  function backBtn(e) {
    e.preventDefault()
    setIndex((prev)=>prev-1)
  }

  return (
    <>
      
        
          
            
            Dota 2
          
          

          

             nextBtn(e)} 
              className='change-btn-one' 
              content='Back' 
              icon='arrow left' 
              labelPosition='left' />

            

             backBtn(e)} 
              className='change-btn-two' 
              content=' Next ' 
              icon='arrow right' 
              labelPosition='right' />

          
            
            
              
{data[index].localized_name}
                
            
          
        
      );
    }

export default App;

$project: {
  _id: 1,
  edited: 1,
  game: {
    gta: {   
      totalUserNumber: {
        $reduce: {
          input: "$gta.users",
          initialValue: 0,
          in: { $add: [{ $size: "$$this" }, "$$value"] },
        },
      },
      userList: "$gta.users", <----- paginating this
    },
    DOTA2: {
        totalUserNumber: {
          $reduce: {
            input: "$dota2.users",
            initialValue: 0,
            in: { $add: [{ $size: "$$this" }, "$$value"] },
          },
        },
        userList: "$dota2.users", <------ paginating this
      },
    },
   .... More Games
  },

game_data: [{
   id: 'HUH',
   name: 'GTA'
   story: 'ahhhh'
}]