How can I filter through api data and print name to console?-CodePudding

I'm frustrated right now. I am trying to filter data in an API and trying to push them to a useState hook array and print them to the console. I am using React and really struggling. Below is the code.

TimeChart.js

const TimeChart = () =>{
    const [tournament, setTournament] = useState([]);

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

        let lcsT = data.map((item) => item.Name === "NA LCS").Name;
        let lecT = data.filter((item) => item.Name === "LEC").Name;
        let lplT = data.filter((item) => item.Name === "LPL").Name;
        let lckT = data.filter((item) => item.Name === "LCK").Name;
        let msiT = data.filter((item) => item.Name === "Mid-Season Invitational").Name;
        let worldsT = data.filter((item) => item.Name === "World Championship").Name;

        setTournament([lcsT, lecT, lplT, lckT, msiT, worldsT]);
           console.log(tournament);
        })
    },[])

If you haven't figured it out yet I'm trying to get names of tournaments and filter throught their names only and push them to the setTournament useState hook array and print them to the console but I get an undefined returned in the console.

Something I also tried:

let lcsT = data.map((item) => item.Name === "NA LCS");
        let lcs = lcsT.map((item) => item.Name);

        let lecT = data.filter((item) => item.Name === "LEC");
        let lec = lecT.map((item) => item.Name);

        let lplT = data.filter((item) => item.Name === "LPL");
        let lpl = lplT.map((item) => item.Name);

        let lckT = data.filter((item) => item.Name === "LCK");
        let lck = lckT.map((item) => item.Name);

        let msiT = data.filter((item) => item.Name === "Mid-Season Invitational");
        let msi = msiT.map((item) => item.Name);

        let worldsT = data.filter((item) => item.Name === "World Championship");
        let worlds = worldsT.map((item) => item.Name);
        setTournament(lcs, lec, lpl, lck, msi, worlds);
    console.log(tournament);

But this returns an empty array in the console.

Something I tried as well:

    for(let i = 0; i < data.length; i  ){
                if( data[i].Name === "NA LCS"){
                    let lcs = data[i].Name;
                    setTournament(lcs);
                } else if(data[i].Name === "LEC"){
                    let lec = data[i].Name;
                    setTournament(lec);
                } else if(data[i].Name === "LPL"){
                     let lpl = data[i].Name;
                     setTournament(lpl);
                } else if(data[i].Name === "LCK"){
                     let lck = data[i].Name;
                     setTournament(lck);  
                 } else if (data[i].Name === "Mid-Season Invitational"){
                     let msi = data[i].Name;
                     setTournament(msi);    
                 } else if (data[i].Name === "World Championship"){
                     let worlds = data[i].Name;
                     setTournament(worlds);
                 }
                 console.log(tournament);
            }

If anyone can point out to me what I am doing wrong, please do so, it's driving me crazy!

Thanks!

CodePudding user response：

You are wrong in using React state hook.

You can't use state variable as soon as you call setState.

e.g. You used setTournament(xxxx); console.log(tournament); in your code. This is mistake.

e.g. You made a mistake to set an array in tournament state: setTournament(lcs, lec, lpl, lck, msi, worlds);.

You cannot set an array by passing multiple parameters.

setState function can only accept a parameter.

You should change it by the following:


newTournament = [lcs, lec, lpl, lck, msi, worlds];
console.log(newTournament);
setTournament(newTournament);

According to your comments, you can use the following code.

const dataMap = {};
data.forEach(item => {
  if (
    item.Name === "NA LCS" ||
    item.Name === "LEC" ||
    item.Name === "LPL" ||
    item.Name === "LCK" ||
    item.Name === "Mid-Season Invitational" ||
    item.Name === "World Championship"
  ) {
    dataMap[item.name] = true;
  }
});
const newTournament = Object.keys(dataMap);
console.log(newTournament);