From 3eb0689ff38d34f3815d4426e99c1e540a2236b8 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Sun, 13 Jan 2019 11:51:45 -0500
Subject: [PATCH] Preventing rendering with the wrong component

---
 src/components/App/index.js | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/App/index.js b/src/components/App/index.js
index b131888..f7e2295 100644
--- a/src/components/App/index.js
+++ b/src/components/App/index.js
@@ -12,7 +12,7 @@ class App extends React.PureComponent {
   state = {
     loading: false,
     loadingError: null,
-    Render: null
+    render: {}
   }
 
   componentDidMount() {
@@ -44,7 +44,7 @@ class App extends React.PureComponent {
     this.setState({
       loading: false,
       loadingError: null,
-      Render: null
+      render: {}
     });
 
     if (!expr) {
@@ -56,7 +56,7 @@ class App extends React.PureComponent {
     });
 
     try {
-      const Render = await import(
+      const Component = await import(
         /* webpackChunkName: "render-[index]" */
         `syntax/${ syntax }`
       );
@@ -66,7 +66,10 @@ class App extends React.PureComponent {
 
       this.setState({
         loading: false,
-        Render: Render.default
+        render: {
+          syntax,
+          Component: Component.default
+        }
       });
     }
     catch (e) {
@@ -99,10 +102,14 @@ class App extends React.PureComponent {
     const {
       loading,
       loadingError,
-      Render,
-      imageDetails
+      imageDetails,
+      render: {
+        syntax: renderSyntax,
+        Component
+      }
     } = this.state;
 
+
     const formProps = {
       onSubmit: this.handleSubmit,
       syntax,
@@ -118,9 +125,11 @@ class App extends React.PureComponent {
       expr
     };
 
+    const doRender = renderSyntax === syntax;
+
     return <>
       <Form { ...formProps }>
-        { Render && <FormActions { ...actionProps } /> }
+        { doRender && <FormActions { ...actionProps } /> }
       </Form>
 
       { loading && <Loader /> }
@@ -130,7 +139,7 @@ class App extends React.PureComponent {
         <a href="#retry" onClick={ this.handleRetry }>Retry</a>
       </Message> }
 
-      { Render && <Render { ...renderProps } /> }
+      { doRender && <Component { ...renderProps } /> }
     </>;
   }
 }