After attempting to follow various React tutorials, I utilized an API to fetch my data. Unfortunately, the method I used doesn't seem to be very efficient and the code examples I found didn't work for me.
I am feeling quite lost on how to properly integrate the information retrieved from the API into my component. My previous solution attempt is currently commented out.
I am aware that there are likely several flaws in my code, so any guidance on debugging or enhancing the React functionality would be greatly appreciated.
App.js
import { useEffect } from "react";
function App() {
const getAllAgents = async () => {
const res = await fetch('https://valorant-api.com/v1/agents/')
const results = await res.json()
const agentNames = [], agentImages = [], agentRoles = []
const agentDetails = []
for (let i = 0; i < Object.keys(results["data"]).length; i++) {
if (results["data"][i]["developerName"] == 'Hunter_NPE') {
continue
}
else {
agentNames.push(results["data"][i]["displayName"])
agentImages.push(results["data"][i]["displayIcon"])
agentRoles.push(results["data"][i]["role"]["displayName"])
}
}
for (let i = 0; i < agentNames.length; i++) {
agentDetails[i] = [agentNames[i], [agentImages[i], agentRoles[i]]]
}
agentDetails.sort();
//console.log(agentDetails)
}
useEffect(() => {
getAllAgents()
}, [])
return (
<div className="app-container">
<h3>Valorant</h3>
<div id="agent_container" className="agent-container">
{/*getAllAgents.map((agentDetails) =>
<agentCard
img={agentDetails[1][0]}
name={agentDetails[0]}
role={agentDetails[1][1]}
/>)*/}
</div>
</div>
);
}
export default App;
agentCard.js
import React from 'react';
const agentCard = ({role, name, img}) => {
return (
<div card-container>
<div className="img-container">
<img src={img} alt={name} />
</div>
<div className="info">
<h3 className="name">{name}</h3>
<small className="role"><span>{role}</span></small>
</div>
</div>
)
}
export default agentCard;