patch.diff

gistfile1.txt

Date: Sat, 31 Jul 2021 09:05:48 -0700
Subject: [PATCH] Declare classes in a component rather than pass them as props

---
 src/pages/TagCreator/TopicTagSection.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/pages/TagCreator/TopicTagSection.js b/src/pages/TagCreator/TopicTagSection.js
index 3c92fd4..fb8d29a 100644
--- a/src/pages/TagCreator/TopicTagSection.js
+++ b/src/pages/TagCreator/TopicTagSection.js
@@ -95,7 +95,8 @@ export const AddTagsQuestion = ({ resetForm,setDisplayState,setChangeValue }) =>
   )
 }
 
-export const ChipInputSection = ({ handleAdd,handleDelete,userTags,classAddTag }) =>{
+export const ChipInputSection = ({ handleAdd, handleDelete, userTags }) => {
+  const classes = useStyles();
   return (
     <ChipInput
       fullWidth
@@ -103,10 +104,10 @@ export const ChipInputSection = ({ handleAdd,handleDelete,userTags,classAddTag }
       onAdd={(chip) => handleAdd(chip)}
       onDelete={(deletedChip) => handleDelete(deletedChip)}
       value={userTags}
-      className = {classAddTag}
+      className={classes.addTag}
     />
-  )
-}
+  );
+};
 
 export const AddTopicTagSection = ({ setDisplayState,setChangeValue,resetForm,userTags,handleAdd,handleDelete }) =>{
   const classes = useStyles();
@@ -123,7 +124,7 @@ export const AddTopicTagSection = ({ setDisplayState,setChangeValue,resetForm,us
         <Typography variant='body1'>What topic(s), cause(s), or civic issue(s) does your project address?</Typography>
       </Grid>
       <Grid data-cy='add-topic-tags'>
-        <ChipInputSection handleAdd={handleAdd} handleDelete={handleDelete} userTags={userTags} classAddTag={classes.addTag} />
+        <ChipInputSection handleAdd={handleAdd} handleDelete={handleDelete} userTags={userTags} />
       </Grid>
       <Grid container direction="row" justify="center" alignItems="center" spacing={3} style={{ padding:'10px' }}>
         <Grid item style={{ padding:'10px' }}><Button onClick={handleGenerateTag} id='generateTagsButton'>Generate Tags</Button></Grid>
@@ -239,7 +240,7 @@ export const AddMoreTags = ({ userTags,setDisplayState,resetForm,changeValue,han
         <Typography variant='body1'>What topic(s), cause(s), or civic issue(s) does your project address?</Typography>
       </Grid>
       <Grid>
-        <ChipInputSection handleAdd={handleAdd} handleDelete={handleDelete} userTags={userTags} classAddTag={classes.addTag} />
+        <ChipInputSection handleAdd={handleAdd} handleDelete={handleDelete} userTags={userTags} />
       </Grid>
       <Grid container direction="row" justify="center" alignItems="center" spacing={3} style={{ padding:'10px' }}>
         <Grid item style={{ padding:'10px' }}><Button onClick={handleAddMoreTags}>Generate Tags</Button></Grid>
-- 
2.31.0