I've been just following a mix of tutorials on React. I used an API to get my data. I don't think the way I did is efficient but the code I looked at didn't work.
I'm completely lost as to how I should approach getting the info I got from the API into the component. My last attempt at a solution is commented out.
I'm sure there's probably a few things fundamentally wrong with my code, so anything that would help fix my code or incorporate more aspects of React would be much 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;
Few more things to do / correct,
You need to set the API response to a component state. You should use the useState hook for that.
React component names should start with a capital first letter. You can either correct it at the import time as well. Better to follow some convention.
import AgentCard from "./agentCard";
Try like below.
import { useEffect, useState } from "react";
import AgentCard from "./agentCard";
function App() {
const [agentDetails, setAgentDetails] = useState([]);
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();
setAgentDetails(agentDetails);
};
useEffect(() => {
getAllAgents();
}, []);
return (
<div className="app-container">
<h3>Valorant</h3>
<div id="agent_container" className="agent-container">
{agentDetails.map((agentDetails) => (
<AgentCard
img={agentDetails[1][0]}
name={agentDetails[0]}
role={agentDetails[1][1]}
/>
))}
</div>
</div>
);
}
export default App;