Problem occurs when check conditions in map function React - reactjs

I am trying to get data from the backend and display the data in the frontend. To do that I tried this code.
function Posts() {
const [notes, getNotes] = useState([]);
useEffect(()=>{
getAllNotes();
}, []);
const getAllNotes = async () => {
await axios.get(`/buyerPosts`)
.then ((response)=>{
const allNotes=response.data.existingPosts;
getNotes(allNotes);
})
.catch(error=>console.error(`Error: ${error}`));
}
console.log(notes);
const buyerId=(localStorage.getItem("userId"));
console.log(buyerId);
const [offers, getOffers] = useState([]);
useEffect(()=>{
getAllOffers();
}, []);
const getAllOffers = async () => {
await axios.get(`/viewPendingSellerOffers`)
.then ((response)=>{
const allNotes=response.data.existingOffers;
getOffers(allNotes);
})
.catch(error=>console.error(`Error: ${error}`));
}
console.log(offers);
const wasteItem = offers?.filter(wasteItem => wasteItem.status==='accepted' && wasteItem.buyerId===buyerId && wasteItem.wasteItemsListId==='completePost');
console.log(wasteItem);
return(
<main className="grid-b">
{notes.map((note,index)=> {
if(note._id===wasteItem.postId)
return (
<article>
<div className="text-b">
<h3>Post ID: {index + 1}</h3>
<p>Location: {note.address}</p>
<p>Post Type: {note.postType}</p>
<p>Address: {note.address}</p>
<p>Telephone No: {note.contact}</p>
</div>
</article>
);
})}
</main>
);
}
export default Posts;
Hare, I call the first API and get a length 7 array of objects. This is an image of this result.
Then I call a second API and get a length 6 array of objects. This is an image of this result.
Then I try to filter second API call results like this const wasteItem = offers?.filter(wasteItem => wasteItem.status==='accepted' && wasteItem.buyerId===buyerId && wasteItem.wasteItemsListId==='completePost'); and I get length 2 array of objects as the result of this filter function.
Then I try to map the first API call data in a map function. To do that I used this condition if(note._id===wasteItem.postId). But this map function is not working. Maybe it does not work because wasteItem is an array of objects. How do I solve this problem?

wasteItem is an array of objects, but you treated it as object here if(note._id===wasteItem.postId). You would need to iterate through wasteItem array first, or use find().
{notes.map((note,index)=> {
if(wasteItem.find(o=>o.postId === note._id) !== undefined)
return (
<article>
...
</article>
);
})}

Related

map is not a function react js

I am rendering a product list from dummyjson
getting response from api
but showing products.map() is not a function
const fetchData = async () => {
const response = await fetch("https://dummyjson.com/products");
const data = await response.json();
return setProducts(data);
}
useEffect(() => {
fetchData();
},[])
console.log(products)
return (
<div>
<ul>
{products.map((product, index) => {
return (
<li key={index}>
<h2>{product.title}</h2>
</li>
);
})}
</ul>
</div>
)
The api returns an object with a property products which contains the products array, so you need to do
{products.products.map((product, index) => {
Alternatively, you could store just the products array in state like so, and you can keep your existing map code.
return setProducts(data.products);
Your data is an object. What you want to do is extract products from the JSON response, so in fetchData method you should call: setProducts(data.products).

Trying to get data from api and map to another component in React

I'm trying to map an array of movies which I get from an API.
The data is fetched successfully but when I try to map the values and display, it becomes undefined and does not show anything.
I'm new to React so any help and advice would be helpful.
const [items, setItems] = useState([]);
const getMovieData = () => {
axios
.get(api_url)
.then((response) => {
const allMovies = response.data;
console.log(allMovies);
setItems(allMovies);
})
.catch((error) => console.error(`Error: ${error}`));
};
useEffect(() => {
getMovieData();
}, []);
return (
<div>
{items.map((item) => {
<p>{item.title}</p>;
})}
</div>
);
The data is stored like this:
0: {
adult: false,
backdrop_path: '/9eAn20y26wtB3aet7w9lHjuSgZ3.jpg',
id: 507086,
title: 'Jurassic World Dominion',
original_language: 'en',
...
}
You're not returning anything from your map
{
items.map((item) => {
// Add a return
return <p>{item.title}</p>
})
}
First, your items value is an empty array[] as you have initialized with setState([]) and your useEffect() runs only after your component is rendered which means even before you could do your data fetching, your HTML is being displayed inside which you are trying to get {item.title} where your items is an empty array currently and hence undefined. You will face this issue often as you learn along. So if you want to populate paragraph tag with item.title you should fast check if your items is an empty array or not and only after that you can do the mapping as follow and also you need to return the element from the map callback. If it takes some time to fetch the data, you can choose to display a loading indicator as well.
const [items, setItems] = useState([]);
const getMovieData = () => {
axios.get(api_url)
.then((response) => {
const allMovies = response.data;
console.log(allMovies);
setItems(allMovies);
}).catch(error => console.error(`Error: ${error}`));
};
useEffect(() => {
getMovieData();
}, []);
return ( < div > {
items.length !== 0 ? items.map((item) => {
return <p > {
item.title
} < /p>
}) : < LoadingComponent / >
}
<
/div>
);
Good catch by Ryan Zeelie, I did not see it.
Another thing, since you're using promises and waiting for data to retrieve, a good practice is to check if data is present before mapping.
Something like :
return (
<div>
{ (items.length === 0) ? <p>Loading...</p> : items.map( (item)=>{
<p>{item.title}</p>
})}
</div>
);
Basically, if the array is empty (data is not retrieved or data is empty), display a loading instead of mapping the empty array.

How to display an array in JSX from a function in React?

I implemented a function where I fetch all Docs from a Firebase collection on a click.
Now I want to display each doc I fetched in a <div> container in JSX. When I try to take the array and display it, I´m getting the error that the array is not found.
This is my code:
async function getAllDivs(){
const querySnapshot = await getDocs(collection(db, "Div"))
const allDivs = [];
querySnapshot.forEach(doc => {
allDivs.push(doc.data().DivContent);
});
}
You would have to return the array from the function, because of the "scope".
Example:
//your current function
async function getAllDivs(){
const querySnapshot = await getDocs(collection(db, "Div"));
return querySnapshot.map((doc) => doc.data().DivContent);
}
//your component
let divs = getAllDivs(); //you can now use "divs" in this scope
return (
<>
divs.map((current_div) => { <div>{current_div}</div> })
</>
)
Also, I suggest against pushing data to an array labeled as const, as it could be confusing for someone else reading your code.
I think you could use something like this:
const MyComponent = () => {
const [docs, setDocs] = useState();
const onClickHandler = async () => {
const docs = await getDocs(collection(db, "Div"));
setDocs(docs);
}
return (
<>
<button onClick={onClickHandler}>Get docs</button>
{docs && docs.map(doc => (
<div>{doc.data().DivContent}</div>
))}
</>
)
}
If DivContent contains HTML you can use dangerouslySetInnerHTML.

Why can't I set an array to API data using useState()?

So I have an app which uses Movies API. I make an API request, then I pass this data to an array using useState hook, basically my code looks like the following:
const App = () => {
type MovieType = { //declaring type
rate: string,
title: string,
tagline: string,
date: string,
};
interface MovieProps { //extending an interface with MovieType
movies: MovieType[],
}
const [movies, setMovies] = useState<MovieType[]>([]); //useState for setting an array to data from api
useEffect(() =>{
fetchMovies();
}, [])
async function fetchMovies() { //function for fetching movies
try{
let apikey = '{api_key}';
let url: string = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=';
url = url + apikey;
const response = await axios.get<[MovieType]>(url);
setMovies(response.data);
}catch(e){
alert('Error');
}
}
return (
<div className="App">
<Header/>
<Hero movies={movies}/>
</div>
);
}
So basically, when I run the app, I get an alert with an error. I've tried renaming the useState, so it differs from props in the <Hero> component, and then I could pass data to an array. But when I do it with [movies, setMovies] it doesn't work. So I guess the problem is somewhere in passing props or type MovieType, but I can't figure out what exactly could be the problem.
Edit: an error I get in try catch:
TypeError: movies.map is not a function
I have movies.map in Container component, which gets movies from the Hero, which gets it from the App:
const Container = ({movies}: MovieProps) => {
return (
<div className="container">
{movies.map((movie) =>(
<MovieItem movie={movie} key={movie.title}/>
))}
</div>
);
};
I don't know why movies.map is not a function if movies is basically an array.
You have to add "await fetchMovies" instead of just "fetchMovies" but since you can't make useEffect async try something like this...
useEffect(() =>{
async function foo(){
await fetchMovies();
}
foo();
}, []);
Hopefully it works!
The problem is that Container component attempting to iterate over movies before fetchMovies has finished getting the data. Essentially, you're trying to iterate over an empty array. To reveal this, and for future debugging purposes, include a console.log(movies) in Container.
To fix, simply include movies.length as a check before you map over the data:
const Container = ({movies}: MovieProps) => {
return (
<div className="container">
{movies.length && movies.map((movie) =>(
<MovieItem movie={movie} key={movie.title}/>
))}
</div>
);
};

nutritionData.map is not a function

I'm currently working on a nutrition app and I'm trying to get my response to render on the screen by mapping over the response array but I'm getting an error that it is not a function.
const [nutritionData, setNutrition] = useState([]);
useEffect( () => {
getNutrition();
}, []);
const getNutrition = async () => {
const response = await fetch(`https://api.edamam.com/api/food-database/parser?nutrition-type=logging&ingr=red%20apple&app_id=${APP_ID}&app_key=${APP_KEY}`)
const data = await response.json();
console.log(data.hints[0].food.nutrients);
setNutrition(data.hints[0].food.nutrients);
};
return (
<div
{nutritionData.map(nutrients =>(
<Nutrition calories={nutrients[0]} carbs=
{nutrients.nutrients[3]} />
))}
</div>
);
};
nutritionData may be used as an array but its prototype is not Array.prototype so you can't use functions like map(), forEach()...
You can check the comparison nutritionData.__proto__ === Array.prototype to figure out.
Hope this can help.

Resources