reposition comments

lee-ma · Sep 24, 2018 · 5665592 · 5665592
1 parent 2a9fbef
commit 5665592
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git a/client/src/components/CommentBox.js b/client/src/components/CommentBox.js
@@ -35,13 +35,14 @@ class CommentBox extends Component {
 
   render() {
     const { rating, error, submitted } = this.state
+    const { ...otherProps } = this.props
     // For after the user submits their comment
     if (submitted) {
       return <Text large className="fadein">Thanks for your opinion!</Text>
     }
 
     return(
-      <div>
+      <div {...otherProps}>
         <Formik
           initialValues = {commentBoxInitialValues}
           onSubmit = {this.handleSubmit}

diff --git a/client/src/scenes/Recipe.js b/client/src/scenes/Recipe.js
@@ -112,7 +112,7 @@ class Recipe extends React.Component {
   renderComments = () => {
     const { comments } = this.props.recipe
     return comments.map((comment, index) => (
-      <Comment comment={comment} />
+      <Comment comment={comment} key={index} />
     ))
   }
 
@@ -151,19 +151,15 @@ class Recipe extends React.Component {
               <Text medium semiBold>
                 Leave a Comment
               </Text>
-              <CommentBox/>
+              <CommentBox style={{ marginBottom: 15 }}/>
+              {this.renderComments()}
             </div>
             {window.innerWidth < 992 && <hr />}
           </div>
           <div className="col-xs-12 col-lg-3">
             <RecipeInformationCard recipe={recipe} />
           </div>
         </div>
-        <div className="row">
-          <div className="col-xs-12 col-lg-7 offset-lg-1">
-            {this.renderComments()}
-          </div>
-        </div>
         {window.innerWidth < 768 &&
           <ScrollToRecipeButton atBottom={atBottom}/>
         }