Conditional rendering in React and JSX

conditional_rendering_in_react.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>
  );
}