Moving FormActions rendering to App

src/components/App/index.js

@@ -4,6 +4,7 @@ import * as Sentry from '@sentry/browser';
 import URLSearchParams from '@ungap/url-search-params';
 
 import Form from 'components/Form';
+import FormActions from 'components/FormActions';
 import Loader from 'components/Loader';
 import Message from 'components/Message';
 
@@ -160,12 +161,12 @@ class App extends React.PureComponent {
     const formProps = {
       onSubmit: this.handleSubmit,
       syntax,
-      expr,
-      actions: {
+      expr
+    };
+    const actions = {
       permalinkUrl,
       svgLink,
       pngLink
-      }
     };
     const renderProps = {
       onRender: this.handleSvgMarkup,
@@ -174,7 +175,9 @@ class App extends React.PureComponent {
     };
 
     return <>
-      <Form { ...formProps } />
+      <Form { ...formProps }>
+        <FormActions { ...actions } />
+      </Form>
 
       { loading && <Loader /> }
 

src/components/Form/index.js

@@ -5,8 +5,6 @@ import ExpandIcon from 'react-feather/dist/icons/chevrons-down';
 
 import style from './style.module.css';
 
-import FormActions from 'components/FormActions';
-
 const syntaxList = [
   { id: 'js', label: 'JavaScript' },
   { id: 'pcre', label: 'PCRE' }
@@ -38,7 +36,7 @@ class Form extends React.PureComponent {
 
   render() {
     const {
-      actions
+      children
     } = this.props;
     const { expr, syntax } = this.state;
 
@@ -63,7 +61,7 @@ class Form extends React.PureComponent {
           </select>
           <ExpandIcon />
         </div>
-        <FormActions { ...actions } />
+        { children }
       </form>
     </div>;
   }
@@ -72,8 +70,11 @@ class Form extends React.PureComponent {
 Form.propTypes = {
   expr: PropTypes.string,
   syntax: PropTypes.string,
-  actions: PropTypes.object,
-  onSubmit: PropTypes.func.isRequired
+  onSubmit: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired
 };
 
 export default Form;