Всем привет! Есть задачка, реализовать компонент для создания новой статьи в блоге. В самой блоке редактирования есть поле тег.
После нажатия на Add Tag, ниже должен появится такой же input и кнопка.
На сервер теги отправляются массивом. Мой подход следующий, есть стейт:
const [tags, setTags] = useState(['']);
который я хочу заполнять значениями(tag).
Далее идет ф-ия:
const createTags = () => {
return tags.map((tag, i) => (
<div className={style.tag} key={i}>
<label className={style.label}>
<input
type="text"
placeholder="Tag"
className={style.tagInput}
{...register(`tagList.${i}`)}
/>
{tags.length > 1 ? (
<button type="button" className={style.btnDelete} onClick={() => deleteTag()}>
Delete
</button>
) : null}
<button type="button" className={style.btnAdd} onClick={(e) => addTag(e, i)}>
Add tag
</button>
</label>
</div>
));
};
Из-за того, что по дефолту в массиве есть элемент, то индекс тегов смещается и первым эл-ом является пустая строка. Если в состоянии убрать строку, то в моем случае поле инпут и button не появится. Возможно нужно изменить подход, но этот же компонент я бы хотел использовать при редактировании статьи, т.е. что бы в инпутах лежали данные из сервера, в случае если я редактирую. Буду рад помощи!
После нажатия на Add Tag, ниже должен появится такой же input и кнопка.
как-то странно ты собрался реализовывать работу с тегами... Куча инпутов с кнопкой "Add".