React HOC for Conditional Render (Auth-Aware): Two Approaches Quiz
Two approaches to a conditional-render HOC for authentication (props-based gate vs context-based gate), plus companions on the hook equivalent and on the HOC return-type contract.
Question Bank
Hard
JavaScript
quiz
react
design-patterns
composition
1,049 views
18
Implement a higher-order component withAuth(Component) that reads isAuthenticated from props passed to the wrapper and either renders the wrapped component or a redirect. The wrapped component must receive all of its original props.
Examples
Example 1:
Input:
const ProtectedDashboard = withAuth(Dashboard);
<ProtectedDashboard isAuthenticated={false} userId={42} />
Output: renders <Redirect to="/login" />
Explanation: the gate sees isAuthenticated=false and returns the redirect; userId is ignored because the wrapped component never renders.Example 2:
Input: <ProtectedDashboard isAuthenticated={true} userId={42} />
Output: renders <Dashboard isAuthenticated={true} userId={42} />
Explanation: gate passes; the HOC forwards all props to the wrapped component.3 more questions, with full solutions and explanations, are available for premium members.
Upgrade to Premium