### Add & Remove Dynamically
Adding or removing a set of tags dynamically.
```jsx live
() => {
const { useState, useRef } = React;
const EditableTagGroup = () => {
const [tags, setTags] = useState(['Unremovable', 'Tag 2', 'Tag 3']);
const [inputVisible, setInputVisible] = useState(false);
const [inputValue, setInputValue] = useState('');
const inputRef = useRef(null);
const showInput = () => {
setInputVisible(true);
};
const handleInputChange = (val) => {
setInputValue(val);
};
const handleInputConfirm = () => {
const tagValues = [...tags];
if (inputValue && tags.indexOf(inputValue) === -1) {
tagValues.push(inputValue);
}
setTags(tagValues);
setInputVisible(false);
setInputValue('');
};
const handleClose = (removedTag) => {
const tagValues = [...tags];
const filtered = tagValues.filter(tag => tag !== removedTag);
setTags(filtered);
};
return (
{tags.map((tag, idx) => (
handleClose(tag)}>{tag}
))}
{inputVisible ? (
)
:
(
New Tag
)}
);
};
return ;
}
```