Listing 13-9: Specifying a fallback component with react-error-boundary

import ErrorBoundary from 'react-error-boundary';

function ErrorFallback({error}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <SyntaxHighlighter language="javascript" style={github}>{error.message}</SyntaxHighlighter>
    </div>  
  )
}

function BadComponentContainer(){
    return (
        <ErrorBoundary
          FallbackComponent={ErrorFallback}>
            <BadComponent />
        </ErrorBoundary>
    )
}

function BadComponent(){
    return (
      {oops:"this is not good"}
    );
}

export default BadComponentContainer;