add editing of input functionality

Currently uses uncontrolled inputs with a `defaultValue` attribute set to the values passed in via props.  The input can then be edited, and when `Enter` is pressed, it updates the stored value state.  Later, this can be updated to be trigger with `Tab` or clicking outside the active input element.

client/homebrew/editor/tagInput/tagInput.jsx

@@ -1,53 +1,74 @@
 const React = require('react');
 const { useState } = React;
-const _     = require('lodash');
-
-const TagInput = ({unique = true, values = [], ...props})=>{
 
+const TagInput = ({ unique = true, values = [], ...props }) => {
 	const [temporaryValue, setTemporaryValue] = useState('');
-	const [valueContext, setValueContext] = useState(values.map((value)=>({ value: value, editing : false })));
+	const [valueContext, setValueContext] = useState(values.map((value) => ({ value, editing: false })));
 
+	const handleInputKeyDown = (evt, value) => {
+		if (evt.key === 'Enter') {
+			submitTag(evt.target.value, value);
+		}
+	};
 
-	const editTag = (evt)=>{
-		setValueContext(valueContext.map((context)=>{
-			context.editing = context.value === evt.target.dataset.value ? true : false;
-			return context;
-		}))
-	}
+	const submitTag = (newValue, originalValue) => {
+		setValueContext((prevContext) => {
+			return prevContext.map((context) => {
+				if (context.value === originalValue) {
+					return { ...context, value: newValue, editing: false };
+				}
+				return context;
+			});
+		});
+	};
 
-	const renderReadTag = (value)=>{
+	const editTag = (valueToEdit) => {
+		setValueContext((prevContext) => {
+			return prevContext.map((context) => {
+				if (context.value === valueToEdit) {
+					return { ...context, editing: true };
+				}
+				return { ...context, editing: false };
+			});
+		});
+	};
+
+	const renderReadTag = (context) => {
 		return (
-			<div key={value} 
-				data-value={value}
-				className={`tag`}
-				onClick={(evt)=>editTag(evt)}>
-					{value}
+			<div key={context.value}
+				data-value={context.value}
+				className='tag'
+				onClick={() => editTag(context.value)}>
+				{context.value}
 			</div>
-		)
-	}
+		);
+	};
 
-	const renderWriteTag = (value)=>{
+	const renderWriteTag = (context) => {
 		return (
-			<input type='text' value={value} />
-		)
-	}
+			<input type='text'
+				key={context.value}
+				defaultValue={context.value} 
+				onKeyDown={(evt) => handleInputKeyDown(evt, context.value)} 
+				autoFocus 
+			/>
+		);
+	};
 
 	return (
 		<div className='field'>
-
 			<label>{props.label}</label>
 			<div className='list'>
-
-				{Object.values(valueContext).map((context, i)=>{ return context.editing ? renderWriteTag(context.value) : renderReadTag(context.value) })}
+				{valueContext.map((context) => { return context.editing ? renderWriteTag(context) : renderReadTag(context); })}
 
 				<input type='text'
-					className={`value`}
+					className='value'
 					placeholder={props.placeholder}
 					value={temporaryValue}
-					onChange={(e)=>setTemporaryValue(e.target.value)} />
+					onChange={(e) => setTemporaryValue(e.target.value)} />
 			</div>
 		</div>
-	)
-}
+	);
+};
 
-module.exports = TagInput;
+module.exports = TagInput;