Render element for each value from props

Take an array of values from props, load it into valueContext state with an "editing" boolean for each value.  Then, when rendering the component, take each value in the valueContext array and create a div for each --

at this point, if the value is "being edited", it returns a div with text "editing".  If not being edited, it returns a div with the value as text.

Nothing is being edited at this point since that functionality doesn't exist yet.

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -347,7 +347,8 @@ const MetadataEditor = createClass({
 			<TagInput label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
 				placeholder='add tag' unique={true}
 				values={this.props.metadata.tags}
-				onChange={(e)=>this.handleFieldChange('tags', e)}/>
+				// onChange={(e)=>this.handleFieldChange('tags', e)}
+				/>
 
 			<div className='field systems'>
 				<label>systems</label>
@@ -372,8 +373,10 @@ const MetadataEditor = createClass({
 				validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
 				placeholder='invite author' unique={true}
 				values={this.props.metadata.invitedAuthors}
+				values={['cat', 'dog', 'fish']}
 				notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
-				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}/>
+				// onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}
+				/>
 
 			<hr/>
 

client/homebrew/editor/tagInput/tagInput.jsx

@@ -1,19 +1,29 @@
 const React = require('react');
-const { useState, useRef, useEffect } = React;
+const { useState } = React;
 const _     = require('lodash');
 
-const TagInput = ({unique, ...props})=>{
+const TagInput = ({unique = true, values = [], ...props})=>{
 
 	const [temporaryValue, setTemporaryValue] = useState('');
+	const [valueContext, setValueContext] = useState(values.map((value)=>({ value: value, editing : false })));
+
+	const tagElement = (value)=>{
+		return (
+			<div className={`badge`}>{value}</div>
+		)
+	}
 
 	return (
-		<div className='field tag-input'>
-			<label>{props.label}
-				<input type='text'
-					className={`value`}
-					placeholder={props.placeholder}
-					value={temporaryValue} />
-			</label>
+		<div className='field'>
+
+			<label>{props.label}</label>
+			{Object.values(valueContext).map((context, i)=>{ return context.editing ? tagElement('editing') : tagElement(context.value) })}
+
+			<input type='text'
+				className={`value`}
+				placeholder={props.placeholder}
+				value={temporaryValue}
+				onChange={(e)=>setTemporaryValue(e.target.value)} />
 		</div>
 	)
 }