I have this simple React examle. Show data in React from API:
import React, { useEffect, useState } from "react";
const UsingFetch = () => {
const [users, setUsers] = useState([])
const fetchData = () => {
console.log('fetching');
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => {
return response.json()
})
.then(data => {
console.log(data);
setUsers(data)
})
}
useEffect(() => {
fetchData()
}, [])
return (
<div>
{users.length > 0 && (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
)}
</div>
)
}
export default UsingFetch
Why is in console twice: fetching and data from console.log?