We Keep Coding

Cannot read the properties after map

where is the error and what should need to change can you explain. After the cart.map props can not read the property name and others. it just read it as an array . when i do console.log(props.product) then in console tab show all added product but when i want to read the name,price and others it cannot it just read only quantity.
i added picture of the console tab please check it.
now what is the problem of that code
please help me out
**Review.js
**
import React, { useEffect, useState } from 'react';
import { getDatabaseCart } from '../../utilities/databaseManager';
import fakeData from '../../fakeData';
import ReviewItem from '../ReviewItem/ReviewItem';
import Cart from '../Cart/Cart';
const Review = () => { const [cart, setCart] = useState([]);
useEffect(()=>{
//cart
const savedCart = getDatabaseCart();
const productKeys = Object.keys(savedCart);
const cartProducts = productKeys.map( key => {
const product = fakeData.filter( pd => pd.key === key);
product.quantity = savedCart[key];
return product;
});
setCart(cartProducts);
}, []);
return (
<div className="twin-container">
<div className="product-container">
{
cart.map(pc => <ReviewItem
key={pc.key}
product={pc}></ReviewItem>)
}
</div>
</div>
);
};
export default Review;
reviewItem.js
import React from 'react';
const ReviewItem = (props) => {
const {name,price,quantity} = props.product;
const reviewItemStyle={
borderBottom:'1px solid lightgray',
marginBottom:'5px',
paddingBottom:'5px',
marginLeft:'200px'
};
console.log(name);
return (
<div style={reviewItemStyle} className="review-item">
<h4 className="product-name">Name:{name}</h4>
<p>Quantity: {quantity}</p>
<p><small>$ {price}</small></p>
<br/>
</div>
);
};
export default ReviewItem;

Cannot read properties of undefined (reading 'map') at NFTContainer for nft collection

So im making a function in react that enables me to connect my react page with my metamask and display my nfts that ive purchaed on opensea onto my webpage once logged in but im facing an error of
Cannot read properties of undefined (reading 'map') at NFTContainer
The error is occurring in NftContainer its saying undefined reading of map but I'm sure I've defined it if you know where I've gone wrong in this please help and drop a solution down below I was expecting to see the names of Nfts I have in my metamask to show nothing but the error is now appearing
import { cleanup } from '#testing-library/react';
import { NoEthereumProviderError } from '#web3-react/injected-connector';
import { useEffect, useState } from 'react';
import './nft.css'
import NFTContainer from './NFTContainer'
export function Nft() {
const [walletAddress, setWalletAddress] = useState(null)
const [nfts, setNfts] = useState()
const connectWallet = async () => {
if (typeof window.ethereum !== 'undefined') {
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
setWalletAddress(accounts[0])
}
}
const getNftData = async () => {
if (!walletAddress) return;
const response = await fetch(`https://api.rarible.org/v0.1/items/byOwner/?owner=ETHEREUM:${walletAddress}`)
const data = await response.json()
debugger
}
useEffect(() => {
getNftData()
}, [walletAddress])
return (
<div className='Nft'>
<div className='text'>
Account: {walletAddress}
</div>
<button className='connect-button' onClick={connectWallet}>
Connect Wallet
</button>
<NFTContainer nfts={nfts} />
</div>
);
}
export default Nft;
import React from 'react'
import NFTCard from './NFTCard'
const NFTContainer = ({ nfts }) => {
let nftToRender;
return (
<div>
{nftToRender = nfts.map((nft, index) => {
return <NFTCard nft={nft} key={index} />
})}
</div>
)
}
export default NFTContainer
import React from 'react'
const nftCard = ({ nft }) => {
return (
<div>
{nft.meta.name}
</div>
)
}
export default nftCard

Because the value is undefined. This is the only place you use .map():
{nftToRender = nfts.map((nft, index) => {
return <NFTCard nft={nft} key={index} />
})}
And that nfts variable comes from props:
const NFTContainer = ({ nfts }) => {
Which is provided to the component:
<NFTContainer nfts={nfts} />
Which is defined in state:
const [nfts, setNfts] = useState()
And since it's never given a value, it's undefined.
You can define it with a default value of an empty array:
const [nfts, setNfts] = useState([])
This should eliminate the error, allowing .map() to just be called on an empty array and quietly not iterate over anything.
Of course, you probably also want to get actual data for it at some point. In the same component where that state is maintained you are making an AJAX call, but never do anything with this result:
const data = await response.json()
Is data the new array you want to use? In that case you'd set it to the state:
setNfts(data);
Or if some property on data is what you want:
setNfts(data.someProperty);
Either way, in order to update the state to the new value you'll need to call setNfts at some point.

getting TypeError: movieDetails.map is not a function when try to use useState in useEffect

import { useSelector, useDispatch } from "react-redux";
import { useEffect, useState } from "react";
import request from "../../requests";
import { fetchMovies } from "../../feautures/movies/moviesSlice";
import "./SingleMoviePage.scss";
import Rating from "../../components/UI/Rating/Rating";
import axios from "axios";
const SingleMoviePage = ({ match }) => {
const dispatch = useDispatch();
const [movieDetails, setMovieDetails] = useState({})
/* params */
const movieId = match.params.id;
const page = match.params.page;
const genre = match.params.genre;
/* movies reducer handle */
const movies = useSelector((state) => state.movies.movies);
const moviesStatus = useSelector((state) => state.movies.status);
/* movieDetails reducer handle */
/* base urls */
const baseImgUrl = "https://image.tmdb.org/t/p/original";
const movieDetailUrl = `https://api.themoviedb.org/3/movie/${movieId}?api_key=c057c067b76238e7a64d3ba8de37076e&language=en-US`;
useEffect(() => {
const fetchData = async() => {
let response = await axios.get(movieDetailUrl);
response = response.data;
setMovieDetails(response)
}
fetchData()
},[movieDetailUrl])
console.log("data: ",movieDetails )
let content;
if (moviesStatus === "loading") {
<div>Loading ...</div>;
} else if (moviesStatus === "succeeced") {
let movie = movies.find((movie) => movie.id.toString() === movieId);
content = (
<div
className="single-movie__container"
style={{
backgroundImage: `url(${
movie.backdrop_path
? baseImgUrl + movie.backdrop_path
: baseImgUrl + movie.poster_path
})`,
}}
>
<div className="single-movie__information">
<h1 className="single-movie__title">{movie.title}</h1>
<div className="single-movie__rate">
<Rating
rating={movie.vote_average}
className="single-movie__stars"
/>
<div className="single-movie__average">
{movie.vote_average}(Imdb)
</div>
</div>
<p className="single-movie__overview">{movie.overview}</p>
<p className="single-movie__genres">
<label>Genres</label>
{
movieDetails.genres.map(genre => {
console.log("genre: ",genre)
return(
<div>{genre.name}</div>
)
})
}
</p>
</div>
</div>
);
}
useEffect(() => {
if (genre === "POPULAR") {
dispatch(fetchMovies(request.fetchPopular(page)));
} else if (genre === "NOW PLAYING") {
dispatch(fetchMovies(request.fetchNowPlaying(page)));
} else if (genre === "UP COMING") {
dispatch(fetchMovies(request.fetchUpComing(page)));
}
}, [dispatch, genre, page]);
return <div className="single-movie">{content}</div>;
};
export default SingleMoviePage;
I'm trying to make a movie website with react-redux. The issue is when I try to get movie details using useEffect and try to map that in:
<p className="single-movie__genres">
I get TypeError: Cannot read property 'map' of undefined error and I get empty object (data: {}) using console.log("data: ", movieDetails).
But if I refresh the page everything works well and I get
data:
{
adult: false,
backdrop_path: "/6MKr3KgOLmzOP6MSuZERO41Lpkt.jpg",
...
}
using console.log("data: ", movieDetails). Why can't I get data when the page is first loaded?

It is because your initial state does not contain "genres" array inside the object. And when react tries to handle
movieDetails.genres.map(...)
it fall down because movieDetails.genres is undefined (and undefined does not support map method of course). Either include empty array in you initial state like:
const [movieDetails, setMovieDetails] = useState({genres:[]})
or use "?" operator in your chain like:
movieDetails.genres?.map(...)

.map method is a prototype function for type array. you should declare moviedetails as an array like this when setting the default value using useState hook.
const [movieDetails, setMovieDetails] = useState([])

There is a point that i dont understand.As far as i know when the component is first loaded first useEffect worked and filled my movieDetails with datas after that map func worked.I mean js works top to bottom and
shouldn't movieStatus be filled with data until it comes to the map function?

How to update react context after pulling data from firebase

Hey everyone pretty new to React hooks. I am simply trying to set some reviews that I retrieve from Firebase but cant seem to get it working. I tried a few solutions and I am struggling to get it working any help would be appreciated.
import React, {useContext, useEffect, useState} from 'react';
import firebase from "firebase";
import ReviewsContext from "./review-context";
const Reviews = () => {
const db = firebase.firestore();
let reviews = useContext(ReviewsContext);
let [reviewsLoaded, setReviewsLoaded] = useState(false);
function getReviews(){
db.collection('reviews')
.get()
.then((snapshot) => {
let dataArray = [];
snapshot.docs.forEach(doc => {
dataArray.push(doc.data());
});
reviews = dataArray;
setReviewsLoaded(true);
console.log('reviews', reviews); // logs the correct amount of reviews
})
}
function renderReviews() {
console.log('renderReviews reviewsLoaded', reviewsLoaded); // is true
console.log('renderReviews reviews length', reviews.length); // is 0
if(reviewsLoaded) {
reviews.map((data) => {
return (
<li key={data.name}>
<h3>{data.name}</h3>
<p>{data.position}</p>
</li>
)
});
}
else {
return false
}
}
useEffect(() => {
getReviews(); // this seems to fire before renderReviews
}, []);
return (
<div>
<ul>
{renderReviews()}
</ul>
</div>
)
};
export default Reviews;

In this case, the context should be stateful. The way you're doing it currently won't work since context on render will always revert to reviews being empty. Your Provider component that gives that ReviewContext should be patterned like below.
import React, { createContext, useState } from "react"
const ReviewContext = createContext()
const ReviewProvider = ({children}) => {
const [reviews, setReviews] = useState([])
return (
<ReviewContext.Provider value={{
reviews: reviews,
setReviews: reviews => setReviews(reviews),
}}>
{children}
</ReviewContext.Provider>
)
}
export default ReviewProvider
export { ReviewContext }
Now, you may do const { reviews, setReviews } = useContext(ReviewContext); Just call setReviews whenever you want to update reviews in the context.
It's actually stated in the docs as well as I searched it. https://reactjs.org/docs/context.html#dynamic-context

How can I use get values from array of objects from JSON response

I am trying to learn how to use API's in react. I am making a search input for country names using the Rest countires API. I am getting data from https://restcountries.eu/rest/v2/all but I do not know how to handle this data as I can not use map on an object.
import axios from "axios";
import React, { useEffect, useState } from "react";
const App = () => {
const [countries, setCountries] = useState([]);
const [searchName, setSearchName] = useState("");
useEffect(() => {
axios.get("https://restcountries.eu/rest/v2/all").then(response => {
setCountries(response.data);
});
}, []);
const handleSearch = event => {
setSearchName(event.target.value);
};
return (
<div>
<div>
find countries <input onChange={handleSearch} />
</div>
<div></div>
</div>
);
};
export default App;
Expected to list countries after typing such as : sw = Botswana, Swaziland, Sweden ...

From the question it seems like, these are requirements of your app -
1
you need to search by country name
As you type in, list of countries matching the search should be displayed.
I created this sandbox with the code you provided - https://codesandbox.io/embed/58115762-rest-countries-o638k.
It shows a pair of country name and its capital as you enter input in the search box.
This is how I changed your code:
You need to search countries? - Use search API with country name as value of text input - searchName
https://restcountries.eu/rest/v2/name/${searchName}
To display the output with countries matching your search keyword - map over countries and get appropriate keys. Pass those keys as props to your newly created Country component.
Note, I did not need to change how you handled the JSON response. The searchName and countries are the only two state variables used to render the UI.

you will need to render countries after fetching from ajax request as like :
import axios from "axios";
import React, { useEffect, useState } from "react";
const App = () => {
const [countries, setCountries] = useState([]);
const [searchName, setSearchName] = useState("");
useEffect(() => {
axios.get("https://restcountries.eu/rest/v2/all").then(response => {
setCountries(response.data);
});
}, []);
const handleSearch = event => {
setSearchName(event.target.value);
};
return (
<div>
<div>
find countries <input onChange={handleSearch} />
</div>
<ul>
{(countries.length<=0)?"":
countries.map(country=> <li>country.name</li> )
}
</ul>
</div>
);
};
export default App;

I think this is what you are looking for.
If you have got questions, dont hesitate to ask :)
import axios from "axios";
import React, { useEffect, useState } from "react";
const App = () => {
const [countries, setCountries] = useState([]);
const [searchName, setSearchName] = useState("");
useEffect(() => {
axios.get("https://restcountries.eu/rest/v2/all").then(response => {
setCountries(response.data);
});
}, []);
const handleSearch = event => {
let str = event.target.value;
let filteredCountries = countries.filter((country) => country.name.toLowerCase().includes(str.toLowerCase()));
setCountries(filteredCountries);
setSearchName(str);
};
return (
<div>
<div>
find countries <input onChange={handleSearch} />
</div>
<ul> {(countries.length <= 0) ? "" : countries.map(country => <li>{country.name}</li>) } </ul>
</div>
);
};
export default App;

data =[your array];
countryList = data.map(data=>data.name)
console.log(countryList)