Create snippet with tags

client/src/components/Snippets/SnippetDetails.tsx

@@ -64,8 +64,8 @@ export const SnippetDetails = (props: Props): JSX.Element => {
 
       {/* TAGS */}
       <div>
-        {tags.map(tag => (
-          <span className='me-2'>
+        {tags.map((tag, idx) => (
+          <span className='me-2' key={idx}>
             <Badge text={tag} color='dark' />
           </span>
         ))}

client/src/components/Snippets/SnippetForm.tsx

@@ -26,7 +26,7 @@ export const SnippetForm = (props: Props): JSX.Element => {
     code: '',
     docs: '',
     isPinned: false,
-    tags: ''
+    tags: []
   });
 
   useEffect(() => {
@@ -46,6 +46,14 @@ export const SnippetForm = (props: Props): JSX.Element => {
     });
   };
 
+  const stringToTags = (e: ChangeEvent<HTMLInputElement>) => {
+    const tags = e.target.value.split(',');
+    setFormData({
+      ...formData,
+      tags
+    });
+  };
+
   const formHandler = (e: FormEvent) => {
     e.preventDefault();
 
@@ -126,13 +134,13 @@ export const SnippetForm = (props: Props): JSX.Element => {
                 className='form-control'
                 id='tags'
                 name='tags'
-                value={formData.tags}
+                // value={formData.tags}
                 placeholder='automation, files, loop'
-                required
-                onChange={e => inputHandler(e)}
+                onChange={e => stringToTags(e)}
               />
               <div className='form-text'>
-                Language tag will be added automatically
+                Tags should be separate with a comma. Language tag will be added
+                automatically
               </div>
             </div>
             <hr />