ronyshahab
KPCKevin Powell - Community
•Created by ronyshahab on 3/6/2024 in #front-end
Nested route problem
1 replies
KPCKevin Powell - Community
•Created by ronyshahab on 3/6/2024 in #front-end
Having problem in wrapping custom hooks with React component
This is my code:-
const App = () => {
return (
<Router>
<Routes>
<Route element={<RoomGuard />}>
<Route
path="profiles"
element={
<AuthGuard>
<LoggedInUser>
<Profiles />
</LoggedInUser>
</AuthGuard>
}
></Routes>
</Route>
</Routes>
</Suspense>
</Router>
</Provider>
);
};
export default App;
this is roomGuard component:-
import React, { useEffect, useMemo } from 'react'
import { io } from "socket.io-client";
const RoomGuard = ({children}) => {
const socket = useMemo(() => io("http://localhost:5000"), []);
useEffect(()=>{
return () => {
socket.disconnect();
};
},[])
return (
<div>
{React.Children.map(children, child => {
return React.cloneElement(child, { socket });
})}
</div>
)
}
export default RoomGuard
what I am trying to do is make a custom component that generate the socket and pass it to all component so that every component can use the socket but somehow it is not working.
WHen I go to the path mention in url of router, the compoent doesn't render what is issue here
1 replies
KPCKevin Powell - Community
•Created by ronyshahab on 4/11/2023 in #front-end
Cannot hit a Url and fetch the data.
First of all here is the code:
import React, { useEffect, useState } from 'react'
import {useParams} from "react-router-dom"
import { fetchApi } from '../../api/Api'
import "./player.css"
const Player = () => {
const {movie_id} = useParams()
console.log(movie_id)
const [data,setData]= useState()
useEffect(()=>{
const fetchData = async()=>{
const {data} = await fetchApi(
/movie/${movie_id}/videos)
setData(data)
}
fetchData()
},[movie_id])
// console.log(data)
return (
<div>Player</div>
)
}
export default Player
and now main things, I have already use the same function to fetch a data but there was another url, also when I used the rapid api extesion, I was still able to fetch the data I want, But I don't know what I am doing wrong here, that I cannot get the data and it is giving error 404.
Again the function is right and I have already fetched the data with different url and the movie_id is also correct. Still can't fetch the data here.10 replies
KPCKevin Powell - Community
•Created by ronyshahab on 3/27/2023 in #front-end
After applying position sticky, button not working
I created a sidebar with buttons to locate throughout the document, but after applying position sticky, buttons are not working at all not even hover effect is working
5 replies
KPCKevin Powell - Community
•Created by ronyshahab on 3/23/2023 in #front-end
Confused between Web And Game Developement.
I am confused between Web and game developement, I have some experience in Front end developement but recently Game developement excites me more, so I am confused. Also, I lost all my previous works and projects and Now am low in motivition to do that thing again.
4 replies
KPCKevin Powell - Community
•Created by ronyshahab on 2/28/2023 in #front-end
How to focus on coding?
My friends often call me for valorant and stuff and it would be just be a excuse to say that because of that I can't focus. But the thing remain same, Even after deleteing the game , it is still hard to focus on coding. Should I just stop watching anime and all sort of distraction ? I still Don't Know How to focus in coding.
25 replies
KPCKevin Powell - Community
•Created by ronyshahab on 2/26/2023 in #front-end
Where to start?
I have good grasp on Html, CSS and Javascript. Recently I learned little bit React and was able to make a single page web appliction. Now , I am looking for a new course that would help me to become a proper frontend developer. Any suggestion where do I start from?
8 replies