Skip to content

Instantly share code, notes, and snippets.

@samoshkin
Created August 20, 2021 18:17
Show Gist options
  • Save samoshkin/156603c09ae2697057bd3a3c83d38b38 to your computer and use it in GitHub Desktop.
Save samoshkin/156603c09ae2697057bd3a3c83d38b38 to your computer and use it in GitHub Desktop.
Conditional rendering in React and JSX
import React, { useCallback } from "react";
import { createEventPageUrl } from "app/packages/error-handling";
function ErrorBoundaryFallback(props) {
const { error, componentStack, resetError, eventId } = props;
const renderEventId = useCallback(eventId => (
<a href="createEventPageUrl(eventId))">{eventId}</a>
), []);
return (
<section className="error-boundary-fallback">
<h1>Error</h1>
<p>{error.message}</p>
<pre>
<code>{componentStack}</code>
</pre>
{eventId && renderEventId(eventId)}
<div>
<button type="button" onClick={resetError}>
Close
</button>
</div>
</section>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment