diff --git a/src/components/item/sharing/CustomizedTagsEdit.js b/src/components/item/sharing/CustomizedTagsEdit.js
index 115f2b9ba..29442ed33 100644
--- a/src/components/item/sharing/CustomizedTagsEdit.js
+++ b/src/components/item/sharing/CustomizedTagsEdit.js
@@ -2,7 +2,13 @@ import React, { useContext, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Loader } from '@graasp/ui';
import { useTranslation } from 'react-i18next';
-import { Typography, TextField, Button, makeStyles } from '@material-ui/core';
+import {
+ Typography,
+ TextField,
+ Button,
+ Chip,
+ makeStyles,
+} from '@material-ui/core';
import SaveIcon from '@material-ui/icons/Save';
import { useParams } from 'react-router';
import { MUTATION_KEYS } from '@graasp/query-client';
@@ -39,7 +45,7 @@ const CustomizedTagsEdit = ({ item, edit }) => {
useEffect(() => {
if (settings) {
- setDisplayValues(settings.tags?.join(' ,') || '');
+ setDisplayValues(settings.tags?.join(', ') || '');
}
}, [settings]);
@@ -90,6 +96,10 @@ const CustomizedTagsEdit = ({ item, edit }) => {
{t('Save')}
+ {t('Tags Preview')}
+ {settings?.tags?.map((tag) => (
+
+ ))}
>
);
};