I'm trying to fetch data from this api https://randomuser.me/api/?results=25
with this code
function Users() {
const [Users, setUsers] = useState([])
useEffect(() => {
axios.get('https://randomuser.me/api/?results=25')
.then(Response=>{
if(Response.data){
alert("FOund")
setUsers([Response.data])
}else{
alert("not found")
}
})
}, [])
const displaylist = Users.map((User,index)=>{
return(
<h3>{User.gender}</h3>
)
})
return (
<div>
{displaylist}
</div>
)
}
export default Users
But nothing is showing up and console is giving this error:
Warning: Each child in a list should have a unique "key" prop.
Check the render method of Users. See https://reactjs.org/link/warning-keys for more information.
at h3
at Users (http://localhost:3000/static/js/main.chunk.js:627:83)
at div
at App
When you map through an array React needs a unique key, something like a User.id; in this case you could use the index as well. I changed your function a little bit like this:
function Users() {
const [Users, setUsers] = useState([]);
useEffect(() => {
axios.get("https://randomuser.me/api/?results=25").then((Response) => {
if (Response.data) {
alert("FOund");
setUsers(Response.data.results);
} else {
alert("not found");
}
}).catch(error => console.log(error));
}, []);
const displaylist = Users.map((User, index) => {
return <h3 key={index}>{User.gender}</h3>;
});
return <div>{displaylist}</div>;
}
export default Users;
The usage of Json result is wrong , `
if (Response.result) {
alert("FOund");
setUsers(Response.result);
} else {
alert("not found");
}`
Related
This is my code to show the get request data in frontend
import React, { useEffect, useState } from "react";
import axios from "axios";
const Users = () => {
const [users, setusers] = useState({ collection: [] });
const [Error, setError] = useState();
useEffect(() => {
axios
.get("http://127.0.0.1:5000/users/users-list")
.then((response) => {
console.log(response.data);
// console.log(response.status);
// console.log(response.statusText);
// console.log(response.headers);
// console.log(response.config);
setusers({ collection: response.data });
return response.data;
})
.catch((error) => {
console.log({ Error: error });
setError(error);
// return error;
});
}, []);
return (
<div>
{users.collection.length > 0 &&
users.collection.map((element, i) => {
return (
<div key={i}>
{element.Name}‑{element.Email}
‑{element.Message}
</div>
);
})}
{Error && <h2>{Error}</h2>}
</div>
);
};
export default Users;
As you can see in the following code I am trying to display my get data in the browser web page .
but its is not displaying in the browser but showing in console.log()
First of all dont make variable starts with capital letter as you have used Error (which refers to Error class in JavaScript) in useState.
You can show component with different state as follows:
const [isLoading, setIsLoading] = useState(false);
const [users, setUsers] = useState([]);
const [error, setError] = useState("");
useEffect(() => {
setIsLoading(true);
axios.get("http://127.0.0.1:5000/users/users-list")
.then((res => {
setUsers(res.data);
setIsLoading(false);
})
.catch(err => {
setError(err.response.data);
setIsLoading(false);
}
},[]);
if (isLoading) {
return <LoadingComponent />
}
if (error !== "") {
return <h1>{error}</h1>
}
if (users.length < 1) {
return <h1>There is no user.</h1>
}
return <div>
{users.collection.map((element, i) => {
return (
<div key={i}>
{element.Name}‑{element.Email}
‑{element.Message}
</div>
);
})}
</div>
You implementation ok it's work with [{"Name":"T","Email":"t#email.com","Message":"T user"}] API response format. Just check what is API response in your end, It should render the results.
I have notice catch block you have to set error message instead of Err object
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const Users = () => {
const [users, setusers] = useState({ collection: [] });
const [Error, setError] = useState('');
useEffect(() => {
axios
.get('https://63a0075424d74f9fe82c476c.mockapi.io/api/collection/Test')
.then((response) => {
console.log(response.data);
// console.log(response.status);
// console.log(response.statusText);
// console.log(response.headers);
// console.log(response.config);
setusers({ collection: response.data });
})
.catch((error) => {
console.log({ Error: error });
setError('Something went wrong');
// return error;
});
}, []);
return (
<div>
{users.collection.length > 0 &&
users.collection.map((element, i) => {
return (
<div key={i}>
{element.Name}‑{element.Email}
‑{element.Message}
</div>
);
})}
{Error && <h2>{Error}</h2>}
</div>
);
};
export default Users;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I tested your code (with a different API) and could not find any issues. As you can see in the codesandbox, the values appear on the screen:
https://codesandbox.io/s/wonderful-ganguly-5ecbid?file=/src/App.js
I noticed that you capitalised the object properties, Name, Email and Message. Perhaps this caused you the issue. You will need to check the console logged object to see whether the properties are capitalised or not. Usually, they will not be. So you would call them like this: element.name, element.email and element.message.
I guess your response data is maybe your problem. I don't know what is your response but it must be array.
I have replace the axios url with some other fake urls and it worked. but remember that the user.collection must be array. Therefor, you need to make sure that response.data is array. Otherwise, you need to set response.data as array in user.collection.
import React, { useEffect, useState } from "react";
import axios from "axios";
const Users = () => {
const [users, setusers] = useState({ collection: [] });
const [Error, setError] = useState();
useEffect(() => {
axios
.get("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => {
console.log(response.data);
setusers({ collection: [response.data] });
return response.data;
})
.catch((error) => {
console.log({ Error: error });
setError(error);
// return error;
});
}, []);
return (
<div>
{users.collection.length > 0 &&
users.collection.map((element, i) => {
return <div key={i}>{element.title}</div>;
})}
{Error && <h2>{Error}</h2>}
</div>
);
};
export default Users;
I'm trying to fetch some data from an api and display it in jsx.First I get the users geolocation,then I call the fetch function which uses the users geolocation data to request the data from an api , afterwards
the received data from an api is used to set the weatherData state.The final step is where conditional rendering is used to show the h1 element depending if the state is defined or not.The problem is that my weatherData is always undefined,and when I try to display it returns as undefined error.Why is my weatherData undefined?
import react from "react";
import {useState} from "react";
import {useEffect} from "react";
const MainWeather=()=>{
{/*State for storing geolocation data*/}
const [status, setStatus] = useState(null);
const [weatherData,setWeatherData]=useState('');
{/*Fetches the data from an api*/}
const fetchData=(link)=>{
fetch(link)
.then(res => res.json())
.then(
(result)=>{
{/*Sets the weather data object*/}
setWeatherData(result);
console.log(result);
setStatus('data set');
},
(error)=>{
console.log(error)
}
)
}
{/*Retrieves the location from geolocation api*/}
const getLocation = async () => {
if (!navigator.geolocation) {
setStatus('Geolocation is not supported by your browser');
} else {
navigator.geolocation.getCurrentPosition((position) => {
{/*Calls the fetch function to get the data from an api*/}
fetchData(`https://api.openweathermap.org/data/2.5/onecall?lat=${position.coords.latitude}&lon=${position.coords.longitude}&exclude={part}&appid=0ea4f961aae42bfa56f75ca058577e1e&units=metric`);
}, () => {
setStatus('Unable to retrieve your location');
});
}
}
{/*Calls getLocation function on the first render*/}
useEffect(()=>{getLocation()},[])
console.log(status);
return(
<div>
{weatherData == 'undefined' ?
<h1>undefined</h1> :
<h1>{weatherData.current.temp}</h1> }
</div>
)
}
export default MainWeather;
I checked the code, what you have implemented is correct , if you are using a mac you should allow browser to fetch location , in windows a popup will come to allow it , might be browser issue check it again
still I made few changes in below the above code , just refer to it
import { useState, useEffect } from "react";
const MainWeather = () => {
const [status, setStatus] = useState(null);
const [weatherData, setWeatherData] = useState("");
const fetchData = (link) => {
fetch(link)
.then((res) => res.json())
.then(
(result) => {
setWeatherData(result);
setStatus("data set");
},
(error) => {
console.log(error);
}
);
};
const getLocation = async () => {
if (!navigator.geolocation) {
setStatus("Geolocation is not supported by your browser");
} else {
navigator.geolocation.getCurrentPosition(
(position) => {
fetchData(
`https://api.openweathermap.org/data/2.5/onecall?lat=${position.coords.latitude}&lon=${position.coords.longitude}&exclude={part}&appid=0ea4f961aae42bfa56f75ca058577e1e&units=metric`
);
},
() => {
setStatus("Unable to retrieve your location");
}
);
}
};
useEffect(() => {
getLocation();
}, []);
return (
<div>
{!weatherData ? (
<h1>{status}</h1>
) : (
<h1>{weatherData?.current?.temp} ℃ </h1>
)}
</div>
);
};
export default MainWeather;
You can refer to this codesandbox
I am having trouble trying to figure out how to get map data from Firestore in reactjs. My code keeps erroring saying "Objects are not valid as a React". Can someone point me to an example or show me one with my database below?
import React, { useState, useEffect } from "react";
import { firestore } from "../../../FireBase/FireBase";
import CartItem from "./CartItem";
const CartPage = (props) => {
const [cart, setCart] = useState(null);
useEffect(() => {
const fetchCart = async () => {
const doc = await firestore
.collection("Users")
.doc("CfL5uszL3CTE1nIQTgDrKK5q4OV2")
.get();
const data = doc.data();
console.log("data " + data);
if (!data) {
// document didn't exist
console.log("hit null");
setCart(null)
} else {
console.log("hit");
setCart(data.cart);
}
console.log("cart " + cart);
}
fetchCart();
}, []);
if (!cart) {
// You can render a placeholder if you like during the load, or just return null to render nothing.
return null;
}
return (
<div className="cartpage">
<h1>cart</h1>
<div className="cart">
{cart.map(cartItem => (
<div key={cartItem.id}>{cartItem.name}</div>
))}
</div>
</div>
);
};
export default CartPage;
The error your getting is because you're returning a promise from your component (You've made it an async function, and async functions return promises). Promises and other arbitrary objects cannot be returned from rendering in react. You need to have a state variable for holding your data. On the first render, you'll have no data, and then you'll use a useEffect to fetch the data and update the state
Additionally, you have some mistakes with how you're trying to get the data and access it. You're calling .get("Cf...V2"), but .get doesn't take a parameter. If you want to specify which document to get, you use the .doc() function for that. .get() will then return a promise, so you need to await that before trying to access any properties on it. The data you get will be an object with all the properties on the right hand side of your screenshot, and you will need to pluck the cart property out of that.
In short, i recommend something like the following:
const CartPage = (props) => {
const [cart, setCart] = useState(null);
useEffect(() => {
const fetchCart = async () => {
const doc = await firestore
.collection("Users")
.doc("CfL5uszL3CTE1nIQTgDrKK5q4OV2")
.get();
const data = doc.data();
if (!data) {
// document didn't exist
setCart(null)
} else {
setCart(data.cart);
}
}
fetchCart();
}, []);
if (!cart) {
// You can render a placeholder if you like during the load, or just return null to render nothing.
return null;
}
return (
<div className="cartpage">
<h1>cart</h1>
<div className="cart">
{cart.map(cartItem => (
<div key={cartItem.id}>{cartItem.name}</div>
))}
</div>
</div>
);
};
I don't think so that you can create async component in this way. What you return in your component should be simple JSX code. If you want to do something asynchronously inside component you should wrap this inside useEffect hook.
const CartPage = (props) => {
const [ cart, setCart ] = useState(null)
useEffect(() => {
const inner = async () => {
const ref = await firestore
.collection("Users")
.get("CfL5uszL3CTE1nIQTgDrKK5q4OV2").cart;
setCart(
ref.map((item) => ({
id: item.id,
name: item.name
}))
);
};
inner();
}, []);
return (
<div className="cartpage">
<h1>cart</h1>
<div className="cart"></div>
</div>
);
};
For this project, I am attempting to transfer the data I have received from the API (a list of albums) and send them to another module in order to display the results based on whichever user has been selected. I'm using "useEffect()" in tandem with the "setAlbums()" function to set and send the album list data through a prop labeled "album". The problem is I am not receiving the data in the other module "AlbumList.js", so I can't display the user's album list. Can anyone find a solution to this? Please forgive all the logs, I'm new to working with React and have been trying to sort this out. Thanks so much for taking the time.
Here is the App.js file:
// App.js
import "./App.css";
import AlbumList from "./AlbumList";
import UserList from "./UserList";
function App() {
const controller = new AbortController();
const [users, setUsers] = useState([]);
const [user, setCurrentUser] = useState({});
const [albums, setAlbums] = useState([]);
document.title = 'Awesome Album App';
const userUrl = "https://jsonplaceholder.typicode.com/users";
// Loading Albums
useEffect(() => {
const albumUrl = `https://jsonplaceholder.typicode.com/albums?userId=${user.id}`;
async function loadAlbums() {
try {
const response = await fetch(albumUrl, { signal: controller.signal });
const json = await response.json();
console.log("Logging json: ", json)
setAlbums(json)
} catch (err) {
if (err.name === 'AbortError') {
console.log('Aborted', err)
} else {
throw err;
}
}
}
loadAlbums();
console.log("After loadAlbums: ", albums)
return () => {
controller.abort();
}
},[user])
// Loading Users
useEffect(() => {
async function loadUser() {
try {
const response = await fetch(userUrl, { signal: controller.signal });
const data = await response.json();
setUsers(...users, data);
} catch (err) {
if (err.name === 'AbortError') {
console.log('Aborted', err)
setUsers([])
} else {
throw err;
}
}
}
loadUser();
return () => {
controller.abort();
}
},[])
// Return JSX
return (
<div className="App">
<div className="left column">
<UserList users={users} setCurrentUser={setCurrentUser} />
</div>
<div className="right column">
<AlbumList user={user} album={album} />
</div>
</div>
);
}
export default App;
Here is the component that displays the albums:
// AlbumList.js
import React from "react";
function AlbumList({ user = {} }, albums) {
console.log("Logging inside of albumsList", albums)
if (albums.length) {
return albums.map((album, index) => {
return <li key={index}>{album.id}{album.title}</li>;
});
}
return (
<div>
<p>Please click on a user name to the left</p>
</div>
);
}
export default AlbumList;```
Is it because you are passing album={album} to the <AlbumList /> component when it should be albums={albums}? I'm not sure if this was just an error when you were transferring your code to Stack Overflow, but <AlbumList/> expects a prop of albums whereas you passed an album prop. Though, I'm curious as to why the compiler didn't throw an error for album not being defined - from what I can see, you only have the albums variable defined. Also, I believe you need to destructure the props in AlbumList.js like so
function AlbumList({ user = {} , albums}) {
(i.e. } should appear after the albums prop).
I'm trying to pass some data through useContext() that I'm getting from a Contentful API but I can't figure out how. Can someone tell me what I'm doing wrong?
First, I get the data and save it in a state:
const [products, setProducts] = useState([]);
function getProducts() {
Client.getEntries("products")
.then((entry) => {
entry.items.map((item) => {
setProducts(products.push(item));
});
})
.catch((err) => console.log(err));
}
useEffect(() => {
getProducts();
}, []);
Then I pass the state to the Provider:
<ProductContext.Provider value={{ products }}>
//children
</ProductContext.Provider>
When I log 'products' inside the getProducts() function, I get an array with a bunch of objects, but when I try to map it somewhere else in my app, I get a products.map is not a function.
import { ProductContext } from "../../../Context";
export default function ProductList() {
const { products } = useContext(ProductContext);
return (
<Container>
{products.map(product => {
//do something
})}
</Container>
);
}
.then((entry) => {
entry.items.map((item) => {
setProducts(products.push(item));
});
could be simplified to
.then((entry) => setProducts(entry.items));
Maybe that's not the cause, but could be that the multiple calls to setProducts() cause some delay (set of state is asynchronous)