Develop Reference

Unable to read attributes of props in React

I'm building a winery themed shopping app in React and I'm using functional components. I have 12 products (wines) displayed on one page, and I want to make a separate page for each wine when the user clicks on it.
This is how I handled routes:
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/products" element={<Products wines={products}/>} />
<Route path="/contact" element={<Contact />} />
<Route path="/cart" element={<Cart />} />
{wines.map((wine) => (
<Route key={wine.id} path={`/shop/${wine.id}`} element={<Item item={wine} />}/>
))}
</Routes>
</BrowserRouter>
I mapped through all of the wines and created a separate route for each of them, and sent a particular wine as a prop to each "Item" component.
Item component looks like this:
const Item = (item) => {
return (
<>
<Header />
<div className="item_container">
<img className="item_image" alt={item.name} src={item.image} />
<h1 className="item_name">{item.name}</h1>
<h3 className="item_price">{item.price}</h3>
</div>
<Footer />
</>
)
When I console log "item" in this component, I get the specific wine and I can see all of its attributes (name, price, image URL), but when I try to access those attributes in order to display them (item.name, item.image, item.price), the console logs "undefined".
How can i fix this?

You've passed a item prop to the Item component.
<Item item={wine} />
And then named the props object item in the Item component.
const Item = (item) => { ... }
Either rename to props and correctly access props.item.xxx
const Item = (props) => {
const { item } = props;
return (
<>
<Header />
<div className="item_container">
<img className="item_image" alt={item.name} src={item.image} />
<h1 className="item_name">{item.name}</h1>
<h3 className="item_price">{item.price}</h3>
</div>
<Footer />
</>
);
}
or destructure item directly
const Item = ({ item }) => (
<>
<Header />
<div className="item_container">
<img className="item_image" alt={item.name} src={item.image} />
<h1 className="item_name">{item.name}</h1>
<h3 className="item_price">{item.price}</h3>
</div>
<Footer />
</>
);
An optimization I'd suggest is to declare a single route with the wine id as a route path param, and then access the wines array in Item.
Example:
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/products" element={<Products wines={products}/>} />
<Route path="/contact" element={<Contact />} />
<Route path="/cart" element={<Cart />} />
<Route path="/shop/:wineId" element={<Item />} />
</Routes>
</BrowserRouter>
...
import { useParams } from 'react-router-dom';
const Item = () => {
const { wineId } = useParams();
const wine = wines.find(wine => wine.id === wineId);
if (!wine) return <div>No wine found.</div>;
return (
<>
<Header />
<div className="item_container">
<img className="item_image" alt={wine.name} src={wine.image} />
<h1 className="item_name">{wine.name}</h1>
<h3 className="item_price">{wine.price}</h3>
</div>
<Footer />
</>
);
}

Please check null and empty array for "wines" first , if not null then map through "wines"

No routes matching location "/dash/1"

I have the following problem. my route is not registered and i dont know why.
Links
dashboard.jsx
this code generates all the links.
<div className="flex w-3/4 m-auto flex-col mt-10 xl:w-1/2">
{questions.map(({ id, question }) => {
return (
<Link to={`/dash/${id}`}>
<QuestionHeader question={question} />
</Link>
);
})}
</div>
/dash/1,/dash/2,.... are generated by the map function above.
i have two files that represent the routes.
NavRoutes
const NavRoutes = () => {
return (
<Routes>
<Route path="/:id" element={<Question />} />
<Route path="" element={<Dashboard />} />
</Routes>
);
};
export default NavRoutes;
here is the Main component
const Main = () => {
return (
<div>
<NavBar />
<NavRoutes />
<Footer />
</div>
);
};
export default Main;
and the main routes for authentication and accessing the main page
const App = () => {
let { user } = useAuthContext();
return (
<div className="w-full bg-slate-700 block fixed h-full">
<Header />
<Router>
<Routes>
<Route
path="/dash"
element={!user ? <Navigate to="/auth" /> : <Main />}
>
</Route>
<Route path="" element={<Login />} />
</Routes>
</Router>
</div>
);
};
when i try to access /dash/1, i get the following error
router.ts:11 No routes matched location "/dash/1"

Did you try the following in your NavRoutes (prepending '/dash' to '/:id'):
<Route path="/dash/:id" element={<Question />} />

i solved this by doing the following
const App = () => {
let { user } = useAuthContext();
return (
<div className="w-full bg-slate-700 block fixed h-full">
<Header />
<Router>
<Routes>
<Route
path="/dash/*"
element={!user ? <Navigate to="/auth" /> : <Main />}
>
</Route>
<Route path="/auth" element={<Login />} />
</Routes>
</Router>
</div>
);
};
you need to include a * when nesting deeper

dispatch inside of child useEffect causes infinite rendering

App.js
return (
<Router history={createBrowserHistory}>
<Routes>
<Route path="/" element={<LandingPage />} />
<Route
path="/login"
element={
<LoginAuth redirectTo="/dashboard">
<SignIn set_token={setAuthToken} setUserType={setUserType} />
</LoginAuth>
}
/>
<Route path="/register" element={<SignUp />} />
<Route
path="/dashboard/*"
element={
<RequireAuth redirectTo="/login">
<UserDashboard />
</RequireAuth>
}
/>
<Route path="/register/subscription" element={<Package />} />
<Route path="/contact" element={<Contact />} />
<Route path="/pricing" element={<Pricing />} />
<Route path="/features" element={<Features />} />
</Routes>
</Router>
);
UserDashboard.js
when route is 'localhost../dashboard' it renders this component and in this useeffect I append URL with home so that home component render automatically.
useEffect(() => {
history("home");
}, []);
return (
<div className="dash-cont background-blue">
<header className="head-cont">
<div className="top-left-head">
<div className="left-header">
<a href="/" className="b-brand">
<span className="logo">SchoolSavvy</span>
</a>
<a href="#!" className="mob-toggler" onClick={onToggle}>
<Hamburger
className="hamburger-react"
toggled={isOpen}
toggle={setOpen}
/>
</a>
<div className="right_head_popup">
<MoreVertIcon />
</div>
</div>
<div className="right-header">
<NotificationsNoneOutlinedIcon className="notify-ico" />
<PersonOutlineOutlinedIcon className="person-ico" />
</div>
</div>
</header>
<div className="body-div">
<UserSidebar is_Open={isOpen} on_Toggle={onToggle} />
<div className="dash-info">
{/* Heading */}
<PathHeading />
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/school/*" element={<SchoolComp />} />
<Route path="/student/*" element={<></>} />
<Route path="/parent/*" element={<></>} />
<Route path="/teacher/*" element={<></>} />
<Route path="/class/*" element={<></>} />
<Route path="/exam/*" element={<></>} />
<Route path="/attendance/*" element={<></>} />
<Route path="/timetable/*" element={<></>} />
</Routes>
</div>
</div>
</div>
);
Home.js
when this component is rendered, dispatch in useEffect causes infinite rendering, anyone knows what's the problem? Thanks
const Home = () => {
const dispatch = useDispatch();
useEffect(() => {
console.log("home rend");
dispatch(loadDashboard());
}, []);
return (
<>
{/* Cards */}
<Card />
<div className="sch_summary">
{/* Charts */}
<BarChart />
<NoticeBoard />
</div>
<Calendar />
</>
);
};
Here is loadDashboard action which is dispatched by useEffect
export const loadDashboard = () => async (dispatch, getstate) => {
try {
dispatch({
type: actionType.DASHBOARD_REQ,
});
console.log(`tokennn: ${getstate().user.token}`);
const { data } = await axios.get("/v1/user/dashboard/detail", {
headers: {
Authorization: `Bearer ${getstate().user.token}`,
},
});
dispatch({
type: actionType.DASHBOARD_SUCCESS,
payload: data.user,
});
} catch (error) {
console.log(`falii: ${error}`);
dispatch({
type: actionType.DASHBOARD_FAILURE,
payload: error.response.data,
});
}
};

One solution is to add the dispatch actions that cause infinite rerender to ref using useRef.
import { useRef } from 'react';
function useAddFnToRef(fn) {
const refProps = useRef({ fn });
return refProps.current.fn;
}
const Home = () => {
const dispatch = useDispatch();
const onLoadDashboard = useAddFnToRef(()=>dispatch(loadDashboard()))
useEffect(() => {
console.log("home rend");
onLoadDashboard();
}, [onLoadDashboard]);
return (
<>
{/* Cards */}
<Card />
<div className="sch_summary">
{/* Charts */}
<BarChart />
<NoticeBoard />
</div>
<Calendar />
</>
);
};

How to hide nav if user is not logged in react

Route.js
const Layout = () => {
const SecuredRoute = ({ ...props }) => (
console.log(props.path),
<Route path={props.path} render={(data) => (
console.log(data),
localStorage.getItem('accessToken')
? <props.render {...data} />
: <Redirect to='/login' />
)} />
)
return (
<>
<BrowserRouter>
<Navbar /> // It needs to be hidden if user is not logged in
<div className='layout'>
<Switch>
<Route exact path='/home' component={Home} />
<Route exact path='/login' component={Login} />
<SecuredRoute exact path='/about' component={About} />
<Route exact path='/contact' component={Contact} />
<Route exact path='/add' component={AddBlog} />
<Route exact path='/edit/:id' component={UpdateBlog} />
<Route exact path='/blog/:id' component={Blogdetail} />
<Route component={Home} />
</Switch>
</div>
<Footer />
</BrowserRouter>
</>
)
}
export default Layout
I want if the user is not logged in then navbar must be hidden. It means when route = '/login' navbar needs to be hidden. u have tried out many things but nothing works. I am new to React. Any help will be appreciated?

You can create a boolean variable and short-circuit it.
render() {
const visible = true;
const notVisible = false;
return (
<div>
{visible && <p>I am visible</p>}
{notVisible && <p>I am not visible</p>}
</div>
);
}

Try this in the Navbar component my friend:
const [loggedIn, setLoggedIn] = useState(false);
const Layout = () => {
const SecuredRoute = ({ ...props }) => (
console.log(props.path),
<Route path={props.path} render={(data) => (
console.log(data),
localStorage.getItem('accessToken')
? <props.render {...data} />
: <Redirect to='/login' />
)} />
)
return (
<>
<BrowserRouter>
<Navbar loggedIn={loggedIn} /> // It needs to be hidden if user is not logged in
<div className='layout'>
<Switch>
<Route exact path='/home' component={Home} />
<Route exact path='/login' component={() => <Login setLoggedIn={setLoggedIn} />} />
<SecuredRoute exact path='/about' component={About} />
<Route exact path='/contact' component={Contact} />
<Route exact path='/add' component={AddBlog} />
<Route exact path='/edit/:id' component={UpdateBlog} />
<Route exact path='/blog/:id' component={Blogdetail} />
<Route component={Home} />
</Switch>
</div>
<Footer />
</BrowserRouter>
</>
)
}
export default Layout
I gave a setState to login component. You give a true boolean when the user logs in, loggedIn(true) and the parent state changes.
And in the Navbar component:
return(
loggedIn
?
//The Body of NavBar
:
""
}
)

Showing two component in the same path inside a switch

I need to set a switch that shows containers components and a login form when the user is not authenticated on each of the main component.
I found another solution that tells you to wrap two components inside a div to use it in the same path inside a switch. But the problem is that some of my components use a req.params from the path that are not passed to the components when they're wrapped in a div
function Routes(props) {
const noLoggedIn = [
{
path: "/",
exact: true,
component: () => <div>
<EventsListContainer />
<LoginFormContainer />
</div>
},
{
path: "/events/:id",
exact: false,
component: () => <div>
//when the component is mounted it doesn't get the :id
<EventDetailsContainer />
<LoginFormContainer />
</div>
}
]
return (<div>
{!props.authenticated &&
<Switch>
{noLoggedIn.map((route, index) =>
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.component}
/>
)}
</Switch>}
{props.authenticated &&
<Switch>
<Route exact path="/" component={EventsListContainer} />
<Route exact path="/" component={CreateEventFormContainer} />
//here the component gets the :id
<Route path="/events/:id" component={EventDetailsContainer} />
<Route path="/events/:id" component={CreateTicketFormContainer} />
</Switch> }
</div>)
}

Try as follows -
<Route path='/some-path' render={props =>
<div>
<FirstChild />
<SecondChild />
</div>
} />
you can also do it like as follows -
render((
<Router>
<Route path="/" component={App}>
<Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}} />
<Route path="users" components={{main: Users, sidebar: UsersSidebar}}>
<Route path="users/:userId" component={Profile} />
</Route>
</Route>
</Router>
), node)
class App extends React.Component {
render() {
// the matched child route components become props in the parent
return (
<div>
<div className="Main">
{/* this will either be <Groups> or <Users> */}
{this.props.main}
</div>
<div className="Sidebar">
{/* this will either be <GroupsSidebar> or <UsersSidebar> */}
{this.props.sidebar}
</div>
</div>
)
}
}
class Users extends React.Component {
render() {
return (
<div>
{/* if at "/users/123" this will be <Profile> */}
{/* UsersSidebar will also get <Profile> as this.props.children.
You can pick where it renders */}
{this.props.children}
</div>
)
}
}
Example from - https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#named-components