I am facing an issue and i think a lot but not able to find any solution please help Note: I have removed some html code because i know the issue was not there So first let explain what the issue is i am desctructuring loading and product which take time to resolve initially when i first created it was not giving error loading become true and the loading component render as soon as the loading become false i can access the variable product and then render the data from it..but before some time i just add a feature of login and i have not even touch this page what happening now is until the value of product and loading is resolved the value of both variables is undefined i find it using console.log() using
import React,{useEffect} from "react";
import { getSingleProduct } from '../action/productAction'
import { useSelector,useDispatch } from 'react-redux'
import { Link } from "react-router-dom";
import { change_img } from "./main";
import { useParams } from "react-router-dom";
const ProductPage = () => {
const dispatch = useDispatch();
const {product,loading} = useSelector(state => state.productDetail)
let { id } = useParams();
console.log("The data of the product is",product)
console.log("The value of the laoding ",loading)
useEffect(()=>{
dispatch(getSingleProduct(id));
},[dispatch,id]);
var iloading =true;
return (
<>
{loading ? (
<h1>Loading...</h1>
) : (
<div>
<div className="card">
<div className="row no-gutters">
<aside className="col-md-6">
<h2 className="title">{product.name}</h2>
<div className="mb-3">
<var className="price h4">Price: $ {product.price}</var>
</div>
<p>
{product.description}
</p>
</main>
</div>
</div>
</div>
)}
</>
);
};
export default ProductPage;
Looks like you are not formating the JSX in the return part Try this simplest form after imports :
const ProductPage = () => {
const dispatch = useDispatch()
const { product, loading } = useSelector((state) => state.productDetail)
let { id } = useParams()
useEffect(() => {
dispatch(getSingleProduct(id))
}, [dispatch, id])
return (
<>
{loading ? (
<h1>Loading...</h1>
) : (
<>
{' '}
<h2 className="title">{product.name}</h2>
</>
)}
</>
)
}
export default ProductPage
If that doesn't work then it means there is a problem in the getSingleProduct or in the related reducer, If gives you the product name then means your code is not formatted correctly. Try to fix this then.
Edit: Also, I have noticed there is no handling if the server does not give the data or if loading and product are undefined then your component will also crash, You can handle this like :
<>
{loading ? (
<h1>Loading...</h1>
) : product ? (
<>
{' '}
<h2 className="title">{product.name}</h2>
</>
) : (
<> No data from Server</>
)}
</>
Related
I'm following this tutorial on YouTube https://youtu.be/b9eMGE7QtTk
The full code can be found here: https://gist.github.com/adrianhajdin/997a8cdf94234e889fa47be89a4759f1
The tutorial was great, but it didn't split all the functionalities into components which is React used for (or I'm so lead to believe).
So we have the App.js
import React, { useState, useEffect } from "react";
import MovieCard from "./MovieCard";
import SearchIcon from "./search.svg";
import "./App.css";
const API_URL = "http://www.omdbapi.com?apikey=b6003d8a";
const App = () => {
const [searchTerm, setSearchTerm] = useState("");
const [movies, setMovies] = useState([]);
useEffect(() => {
searchMovies("Batman");
}, []);
const searchMovies = async (title) => {
const response = await fetch(`${API_URL}&s=${title}`);
const data = await response.json();
setMovies(data.Search);
};
return (
<div className="app">
<h1>MovieLand</h1>
<div className="search">
<input
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="Search for movies"
/>
<img
src={SearchIcon}
alt="search"
onClick={() => searchMovies(searchTerm)}
/>
</div>
{movies?.length > 0 ? (
<div className="container">
{movies.map((movie) => (
<MovieCard movie={movie} />
))}
</div>
) : (
<div className="empty">
<h2>No movies found</h2>
</div>
)}
</div>
);
};
export default App;
MovieCards.jsx is as follows:
import React from 'react';
const MovieCard = ({ movie: { imdbID, Year, Poster, Title, Type } }) => {
return (
<div className="movie" key={imdbID}>
<div>
<p>{Year}</p>
</div>
<div>
<img src={Poster !== "N/A" ? Poster : "https://via.placeholder.com/400"} alt={Title} />
</div>
<div>
<span>{Type}</span>
<h3>{Title}</h3>
</div>
</div>
);
}
export default MovieCard;
The app works, but I want to move className="search" to be its own component like Search /.
The code I end up having in App.js is
//at the top of App.jx
import Search from "./Search"
// in const App
<Search prop={searchMovies}/>
And in the new Seach / component
import { useState } from "react";
import SearchIcon from './search.svg';
const Search = ( prop ) => {
const [searchTerm, setSearchTerm] = useState("");
return (
<div className="search">
<input
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="Search"
/>
<img
src={SearchIcon}
alt="search"
onClick={() => prop(searchTerm)}
//props used to be searchMovies
/>
</div>
)
}
export default Search;
When typing something in the search field on the app and clicking on the search icon I get the following error:
prop is not a function
If my research has been correct, I need to use a constructor and super()
But it seems like the constructor needs to be called in a class Search instead of const Search as it breaks the code. Is that the case or is there a way to use the constructor in a function component, or is there something else completely that I should do?
Also, if there is a great tutorial you could recommend for super() I'd be really grateful.
Other thing that I want to do is to make a Results component or call it whatever that would have the {movies?.length > 0 ? ( part of the code, but I feel like that will be a different headache.
Basically what I want is to have:
const App = () => {
return (
<div className="app">
<h1>Movie Site</h1>
<Search />
<Results />
</div>
);
};
Or as shown in the picture
Hope all this makes sense. Also, I want to preface that I do not expect anyone to write the code for me, but if it helps me understand this it's appreciated. YT tutorials are appreciated as well.
Okay, after a push in the right direction from jonrsharpe and renaming the props into random things I figured it out.
As jonrsharpe said, my function is prop.prop, so if I wanted to call searchTerm in
onClick={() => prop(searchTerm)}
it should be
onClick={() => prop.prop(searchTerm)}
Now, that works, but looks silly. So renaming the first "prop" in prop.prop and the prop in const Search to searchOnClick leaves searchOnClick.prop(searchTerm) which still works. Great.
Then in App.js renaming prop in Search prop={searchMovies} to searchOnClick={searchMovies} needs to be followed by renaming searchOnClick.prop in Search.jsx to searchOnClick.searchOnClick.
Lastly, we want to destructure the props as jonrsharpe said.
const Search = ( searchOnClick ) => {
would become
const Search = ( {searchOnClick} ) => {
That allows us to remake searchOnClick.searchOnClick(searchTerm) to searchOnClick(searchTerm) only.
The whole point is that the prop calls the whole componentName variable=value but it doesn't take the value of the variable automatically so it needs to be called like prop.variable until destructured where it can be called as variable only.
Now that I figured this out it feels silly spending two days on this. Thanks to jonrsharpe again, and hope this helps to someone else in the future.
Summarizing The Problem
- Details About The Goal
A weather app that renders on the screen the data fetched from OpenWeather API.
- Actual and Expected Results
Whether the user types correctly or not the city name or presses enter in the empty field, no result render on the screen. I would like help to resolve it.
What it Has Been Tried So Far (Update 1.1)
I've placed a conditional operator below the *Search* component in the *App.js* file:
{typeof dataSearch === "undefined" ? (<></>) : ()}
{typeof dataSearch === "undefined" ? (
<></>
) : (
<>
<CurrentWeather resultData={weatherData} />
<ForecastWeather resultData={forecastData} />
</>
)}
I would not expect that it would leave the screen blank.
Well, thank you for reading my post.
The Complete Code
- App.js (Update 1.1)
import React, { useState } from "react";
import { Api } from "./Api";
import { Container } from "react-bootstrap";
import {
Search,
CurrentWeather,
ForecastWeather,
Footer,
} from "./components/index";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
const [weatherData, setWeatherData] = useState(null);
const [forecastData, setForecastData] = useState(null);
const handleSearchLocation = (dataSearch) => {
const weatherDataFetch = fetch(
`${Api.url}/weather?q=${dataSearch}&units=metric&appid=${Api.key}`
);
const forecastDataFetch = fetch(
`${Api.url}/forecast?q=${dataSearch}&units=metric&appid=${Api.key}`
);
Promise.all([weatherDataFetch, forecastDataFetch]).then(
async (response) => {
const weatherResponse = await response[0].json();
const forecastResponse = await response[1].json();
setWeatherData(weatherResponse);
setForecastData(forecastResponse);
}
);
};
return (
<div className="App">
<div className="contentApp">
<Container>
<Search
searchResultData={handleSearchLocation}
textPlaceholder="Search for a place..."
/>
{typeof dataSearch === "undefined" ? (<></>) : (
<>
<CurrentWeather resultData={weatherData} />
<ForecastWeather resultData={forecastData} />
</>
)}
<Footer />
</Container>
</div>
</div>
);
}
export default App;
Yippee-ki-yay
Summarizing The Problem
The main issue that I was facing was with handling the API logic to display the search result on the screen and before that, once the user types wrong the city name or pressed enter into the blank input field, the program crashed.
However, I've begun to search for why this was happening and in the course of time after observing other codes, I've seen that the IF statement should be used to fix this issue.
Problem Resolution
After several attempts, the solution was to remove the Promise.all() and separate them, weather and forecast, into await blocks of codes with their own IF statement:
// App.js
await weatherDataFetch
.then((res) => {
if (!res.ok) {
throw new Error("City name: typed wrong or blank input.");
}
return res.json();
})
.then((res) => {
setWeatherData(res);
})
.catch((err) => {
console.log(err);
});
await forecastDataFetch
.then((res) => {
if (!res.ok) {
throw new Error(
"Weather forecast not found. Waiting for the correct city name."
);
}
return res.json();
})
.then((res) => {
setForecastData(res);
})
.catch((err) => {
console.log(err);
});
The async has been moved to the top of the handleSearchLocation function:
// App.js
const handleSearchLocation = async (dataSearch) => {
And for the last, deleting the old attempt to clean and avoid conflict and crashes:
// Old
// App.js
return (
<div className="App">
<div className="contentApp">
<Container>
<Search
searchResultData={handleSearchLocation}
textPlaceholder="Search for a place..."
/>
{typeof dataSearch === "undefined" ? (<></>) : (
<>
<CurrentWeather resultData={weatherData} />
<ForecastWeather resultData={forecastData} />
</>
)}
<Footer />
</Container>
</div>
</div>
);
// New
// App.js
return (
<div className="App">
<div className="contentApp">
<Container>
<Search
searchResultData={handleSearchLocation}
textPlaceholder="Search for a place..."
/>
{weatherData && <CurrentWeather resultData={weatherData} />}
{forecastData && <ForecastWeather resultData={forecastData} />}
<Footer />
</Container>
</div>
</div>
);
Note
Other beginners, like me, observe other codes and especially code variations of the same programs because there are a lot of ways to do the same thing.
Yippee-ki-yay
I want to create a feed where a Google Ad is shown after every 10 posts just like Instagram. I am using Firebase as my database and tailwind-CSS for the styling. How would I use Google Ads to implement this feature?
Here is my code for displaying a Feed
Feed.js
import {React, useState, useEffect} from "react";
import Navbar from "./Navbar";
import Post from "./Post";
import { onSnapshot, collection, query, orderBy } from "#firebase/firestore";
import { db } from "../firebase";
function Feed() {
const [posts, setPosts] = useState([]);
useEffect(
() =>
onSnapshot(
query(collection(db, "posts"), orderBy("timestamp", "desc")),
(snapshot) => {
setPosts(snapshot.docs);
}
),
[db]
);
return (
<div>
<Navbar />
<div className="pb-72">
{posts.map((post) => (
<Post key={post.id} id={post.id} post={post.data()} />
))}
</div>
</div>
);
}
export default Feed;
The javascript map function has a second parameter - index - that tells you the index of the item in the array it is iterating. So you would want to make two key changes:
return (
<div>
<Navbar />
<div className="pb-72">
{posts.map((post, idx) => {
// If true, you're on the tenth post
const isTenthPost = (idx + 1) % 10 === 0
// Note the addition of the React fragment brackets - your map call
// has to return a single React component, so we add this to handle
// the case where we want to return both the post and the Google ad.
return (
<>
<Post key={post.id} id={post.id} post={post.data()} />
{ isTenthPost && <GoogleAdComponent /> }
</>
)
})}
</div>
</div>
);
I'm not suggesting you copy and paste this exactly, but it should help you understand how to determine if you're on the nth post and how to conditionally display another component.
I have been struggling with this for some time and I am not sure how to solve the issue.
Basically, I am trying to render some components onto my Index page, this is my code below:
App.js
import Index from "./Components/Index"
import axios from "axios"
export default function App() {
const [movieList, setMovieList] = React.useState([])
let featured = []
let coming = []
let showing = []
React.useEffect(() => {
console.log("Ran App Effects")
axios.get(`API_CALL_TO_GET_LIST_OF_MOVIES`)
.then(res =>{
setMovieList(res.data)
})
}, [])
return(
<div>
{movieList.map(movie =>{
if(movie.status === 'featured'){
featured.push(movie.api_ID)
} else if (movie.status === 'upcoming'){
coming.push(movie.api_ID)
} else{
showing.push(movie.api_ID)
}
})}
<Index featured={featured} coming={coming} showing={showing}/>
</div>
)
}
In the code above I am receiving an array of Objects and based on what is in their status I am putting them in some empty arrays and sending them as props into my Index component.
This is what my index component looks like:
import React from "react"
import Header from "./Header"
import Footer from "./Footer"
import MovieCard from "./MovieCard"
import axios from "axios"
export default function Index(props) {
const [featuredMovies, setFeaturedMovies] = React.useState([])
const [comingMovies, setComingMovies] = React.useState([])
//const featured = [419704,338762,495764,38700,454626,475557]
//const coming = [400160,514847,556678,508439,524047,572751]
React.useEffect(() => {
console.log("Ran Effect")
axios.all(props.featured.map(l => axios.get(`API_CALL_TO_GET_SPECIFIC_MOVIE/${l}`)))
.then(axios.spread(function (...res){
setFeaturedMovies(res)
}))
.catch((err) => console.log(err))
axios.all(props.coming.map(l => axios.get(`API_CALL_TO_GET_SPECIFIC_MOVIE/${l}`)))
.then(axios.spread(function (...res){
setComingMovies(res)
}))
.catch((err) => console.log(err))
}, [])
return(
<body>
<Header />
<section className="home">
<div className="container">
<div className="row">
<div className="col-12">
<a className="home__title">FEATURED MOVIES</a>
</div>
{ featuredMovies.map(movie =>{
return <MovieCard movie={movie} featured={true} />
}) }
{console.log(props.featured)}
</div>
</div>
</section>
<section className="home">
<div className="container">
<div className="row">
<div className="col-12">
<a className="home__title">COMING SOON</a>
</div>
{ comingMovies.map(movie =>{
return <MovieCard movie={movie} featured={false} />
})}
</div>
</div>
</section>
<Footer/>
</body>
)
}
The issue I am running into is, whenever I run the app for the first time it works fine but then when I hit the refresh button the components do not render anymore
The only time it re-renders when I refresh the page is when I uncomment,
//const featured = [419704,338762,495764,38700,454626,475557]
//const coming = [400160,514847,556678,508439,524047,572751]
and replace the props.featured.map and props.coming.map with featured.map and coming.map hence using the hard coded values and not the values passed in from the props.
Any help with this would be much appreciated as I am completely stuck and currently pulling my hair out.
I took the liberty to tinker with your code. In the example below I've rearranged the data into three sets with the help of useMemo and by checking the status property of each movie. It is important to keep any data related logic outside of the render logic.
I also moved around some of your HTML structure. You were outputting a <body> tag inside of a <div>. The outer layer should be in control of the outer HTML structure, so I moved that HTML to the App component.
import { useState, useEffect, useMemo } from 'react'
import Header from "./Components/Header"
import Footer from "./Components/Footer"
import Index from "./Components/Index"
import axios from "axios"
export default function App() {
const [movieList, setMovieList] = useState([])
const featuredMovies = useMemo(() => {
return movieList.filter(({ status }) => status === 'featured');
}, [movieList]);
const upcomingMovies = useMemo(() => {
return movieList.filter(({ status }) => status === 'upcoming');
}, [movieList]);
const showingMovies = useMemo(() => {
return movieList.filter(({ status }) => status !== 'featured' && status !== 'upcoming');
}, [movieList]);
useEffect(() => {
axios.get(`API_CALL_TO_GET_LIST_OF_MOVIES`)
.then(res =>{
setMovieList(res.data)
})
}, [])
return (
<body>
<Header />
<Index data={featuredMovies} title="Featured Movies" featured={true} />
<Index data={upcomingMovies} title="Coming Soon" />
<Index data={showingMovies} title="Showing Now" />
<Footer/>
</body>
)
}
Since we now have three sets of movies (featured, upcoming, and playing) it would also make sense to have three components that handle those data sets instead of having one that handles multiple. Each Index component gets its own data set and other props to render the movies within it.
import MovieCard from "./MovieCard"
export default function Index({ data, title, featured = false }) {
return (
<section className="home">
<div className="container">
<div className="row">
<div className="col-12">
<a className="home__title">{title}</a>
</div>
{data.map(movie => {
return <MovieCard movie={movie} featured={featured} />
})}
</div>
</div>
</section>
);
}
so i'm creating my first fullstack website and once a user signs in it gets stored in the localStorage and i want to display the name of the user in my header once he is logged in but my header is not re rendering so nothing happens : this is the header before logging in
header
and this is how i want it to Be after signing in :
header after logging in this is my Layout code:
import "../assets/sass/categoriesbar.scss";
import Header from "./Header/Header";
const Layout = (props) => {
return (
<>
<Header/>
<main>
{ props.children}
</main>
</>
);
}
export default Layout;
and this is the toolBar in my Header :
const ToolBar = () => {
const history = useHistory();
let currentUser= JSON.parse(localStorage.getItem("user-info"));
const logoutHandler = () => {
localStorage.clear("user-info");
history.push("/login");
};
return (
<>
<div className={classes.NavigationBar}>
<h1>
<Link to="/">Pharmashop</Link>
</h1>
<NavLinks logout={logoutHandler}/>
{localStorage.getItem("user-info")?
<h5>Welcome {currentUser.name} !</h5>
:
<RegisterButton />
}
</div>
</>
);
};
export default ToolBar;
please help me it's frustrating
PS: this is my first stackoverflow question sorry if it's unorganized and unclear and sorry for my bad english.
Hazem, welcome to Stack Overflow.
In react, if you want the component to re-render when some data changes, that info must be in the component state. In your code the current user is a const, not bind to the component's state. This is how it could auto re-render when the user logs in:
const ToolBar = () => {
const [currentUser, setCurrentUser] = useState(JSON.parse(localStorage.getItem("user-info")));
const logoutHandler = () => {
localStorage.clear("user-info");
history.push("/login");
};
return (
<>
<div className={classes.NavigationBar}>
<h1>
<Link to="/">Pharmashop</Link>
</h1>
<NavLinks logout={logoutHandler}/>
{currentUser?
<h5>Welcome {currentUser.name} !</h5>
:
<RegisterButton />
}
</div>
</>
);
};
export default ToolBar;
See more about state in the official documentation.