How to show all all the names from API to be rendered in DOM?-CodePudding

I am using React and trying to print all names of the characters from an API using useState() and useEffect() hooks from React but only the last character name is printed to the DOM instead of the entire list (I'm using a for loop inside of the useEffect hook). Is there something I'm doing wrong for it to only show the last character in the array?

T.I.A

Compare.js

import React from 'react';
import './Compare.css';
import axios from 'axios';
import "https://kit.fontawesome.com/3d7d8906d0.js";
import RadarChart from '../components/charts/RadarChart';
import Radar2 from '../components/charts/Radar2';
import {useEffect, useState, useRef} from 'react';

const Compare = () => {

    const[allChampions, setAllChampions] = useState("");

    useEffect(() => {
        axios.get('https://api.sportsdata.io/v3/lol/stats/json/Champions?key=94c287b249d74701adf60e03aa398884')
        .then((res) => {
            let data = res.data;

            for( let i = 0; i < data.length; i  ) {
                const championNames = data[i].Name;
                setAllChampions(championNames);
            }
        })
    }, [])

    console.log(allChampions);
    return(
        <>

            <div className='intro'>
                <h2>Compare</h2>
                <h3>Who is the strongest?<br/></h3>
                <p>Compare champions on their <strong>HP</strong>, <strong>Mana</strong>, <strong>Armor</strong>, <strong>Attack</strong> & <strong>Defense</strong>. </p>
            </div>
            
            <div className='search-block'>

                {/* Would use this for compare page! */}
                <div>
                    <div className='search'>
                        <input type="search" id='champion-search' placeholder='e.g Annie'/>
                    </div>
                    <button className='btn-prim'>Search</button>
                </div>

                <div className='championNames'>
                    {allChampions}
                </div>

            </div>

            

            <div className='search-block'>

                {/* Would use this for compare page! */}
                <div>

                    <div className='search'>
                        <input type="search" id='champion-search' placeholder='e.g Annie'/>
                    </div>
                    <button className='btn-prim'>Search</button>
                </div>

            </div>

            <div className='result'>

                <div className='graph-block'> 
                    <h3>ANNIE</h3>
                    <img src='https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Annie_0.jpg' width="50%"/>
                    <RadarChart/>
                </div>


                <div className='graph-block'>
                    <h3>AATROX</h3>
                    <img src='https://lolstatic-a.akamaihd.net/frontpage/apps/prod/rg-champion-aatrox/en_GB/5b922bef08881410f8fffa7273c30a75dfb1d11f/assets/downloads/wallpapers/aatrox-1920x1080.jpg' width="50%"/>
                    <Radar2/>
                </div>

            </div>

        </>
    )
}

export default Compare;

App.js

import './index.css'
import {Routes, Route} from 'react-router-dom';

import Nav from "./components/Nav";
import Dashboard from "./components/Dashboard";
import Compare from './components/Compare';
import Timeline from './components/Timeline';

function App() {
  return (
    <div className="App">
      <Nav />
      <Routes>
        <Route path='/' element = {<Dashboard/>}></Route>
        <Route path='/Compare' element = {<Compare/>}></Route>
        <Route path='/Timeline' element = {<Timeline/>}></Route>
      </Routes>
    </div>
  );
}

export default App;

CodePudding user response：

You have to use map

 {allChampions.map((item)=>
               { 
                <div key={item.ChampionId} className='championNames'>
                    {item.Name}
                </div>
                
                })}

CodePudding user response：

i suggest u to use the .map fuction instead o this. then after the fetching you set the state called data with the data u have fetched. then inside the jsx use this

 axios.get('https://api.sportsdata.io/v3/lol/stats/json/Champions?key=94c287b249d74701adf60e03aa398884')
    .then((res) => {
        let data = res.data}
 .then(setdata(data))

//then u can use the map function like i said

{data && data.map(item=>(
<h1>{item}</h1>
))};

this means that when the data is here get every object in that list and pass it into h1 tag

CodePudding user response：

You need to make minor changes in your useEffect

useEffect(() => {
        axios.get('https://api.sportsdata.io/v3/lol/stats/json/Champions?key=94c287b249d74701adf60e03aa398884')
        .then((res) => {
            let data = res.data;
            const championNames = []
            for( let i = 0; i < data.length; i  ) {
                championNames.push(data[i].Name)
            }
            setAllChampions(championNames);
        })
    }, [])

Or you can use more better approaches that others are suggesting.