How to loop through a JSON array with useEffect in React? - json

Question

I am trying to loop through a JSON array with useEffect. When I use the below code (with the array removed from useState) with a single user specified, I am able to get the data. However it does not work with the entire array...any suggestions would be appreciated.
function GitHubUser() {
const [data, setData] = useState([]);
useEffect(() => {
fetch(`https://api.github.com/users/`)
.then(res => res.json())
.then(setData)
.catch(console.error);
}, []);
if (data) {
return (
<div>
<h1>{data.userId}</h1>
<img src={data.avatar_url} width={100} alt={"github avatar"}/>
<p>{data.login}</p>
</div>
);
}
return null;
}

Answer 1

It doen't work because when you do if (data) it returns true because empty array is true
const data = [];
if (data) {
console.log("Empty array is true");
} else {
console.log("Empty array is false");
}
So... when you try to get userId from an empty array it throws an error.
If data is supposed to be an array...
function GitHubUser() {
const [data, setData] = useState([]);
useEffect(() => {
fetch("https://api.github.com/users")
.then((res) => res.json())
.then(setData)
.catch(console.error);
}, []);
if (data) {
return (
<React.Fragment>
{data.map((user) => (
<div>
<h1>{user.userId}</h1>
<img src={user.avatar_url} width={100} alt={"github avatar"} />
<p>{user.login}</p>
</div>
))}
</React.Fragment>
);
}
return null;
}
You have to map each user to the expected output component. Using a map will prevent the previous behaviour because if no elements are present in the array, it will not map anything and return an empty component instead of an error.
If data is not supposed to be an array, then you shouldn't use a map nor initialize the state with an empty array because before running the fetch it will try to render the component and fail.

Answer 2

Is this something like you u want?
I removed the backslash after https://api.github.com/users*here*.
I set the data in useEffect hooks, in your example you didnt do it.
And mapped the array in data, it shows all the github users with
images and names.
.
function GitHubUser() {
const [data, setData] = useState([]);
useEffect(() => {
fetch(`https://api.github.com/users`) // removed the backslash here
.then(res => res.json())
.then(data => setData(data)) // changed this line
.catch(console.error);
}, []);
console.log(data)
return (
<div>
{data.map((item, key) => <> // Mapping through the array here
<h1 key={key}>{item.id}</h1>
<img src={item.avatar_url} width={100} alt={"github avatar"}/>
<p>{item.login}</p>
</>
)}
</div>
);
}