Как сделать так чтобы у фоток были свои собственные комментарии а не общие?

Question

[deniskossaa]

Я создал проект галерея фотографий на React, у меня там функционал написания комментарий, как сделать так чтобы у каждой фотки были свои собственные комментарии а не общие (я просто сделал один state и там храню все комментарии и поэтому у каждой фотки одни и теже комментарии, но как сделать как я хочу, не знаю)

Comments

[Gary_Ihar]

Легко, я вот ток что написал код, где все работает и получилось, что у всех комментарии раздельные

[deniskossaa]

Gary_Ihar, как?

[Gary_Ihar]

deniskossaa, бро, это бы намек, что без примера твоего кода хер кто тут поможет. Закинь все в песочницу, мож кто и ответит

[deniskossaa]

const [comments, setComments] = useState([
])

function addNewComment() {
const newComments = {
id: Date.now(),
body: valueComments
}
setComments([...comments, newComments])
setValueCommnets('')
}

Answer 1

[Вадим]

deniskossaa, Ну давайте чуть чуть совсем подумаем.
Скажем, Вы автовладелец. Как понять что автовладелец именно Вы, а не я? Мы же оба люди, так?
Где то можно посмотреть, что именно эта машина привязана именно к Вам?

Дело за малым. Создайте связь между картинками и комментарийями.
Таким образом, сделаем массив элементов галлереи, каждый элемент которого - объект, у которого есть свойства: src - путь до картинки, comments - массив комментариев к этой картинке, id - уникальный идентификатор картинки для удобства.
И далее делаем следующую структуру:

const galleryItems = [
  {
    src: 'http://....' // абсолютный или относительный путь,
    comments: ['Комментарий по умолчанию'],
    id: 1
  },
  {
    src: 'http://....' // абсолютный или относительный путь,
    comments: ['Комментарий по умолчанию ко второй картинке'],
    id: 2
  }
]

Ну собственно и всё. Дальше по факту добавления комментарий находим в массиве по id нужную картинку и добавляем в её поле comments новый комментарий.

Для ускорения работы можно сделать хэш таблицу

{ [imageId]: galleryItem } // galleryItem - объект из массива

и тогда по id из хэш таблицы считывать картинку и добавлять комментарий - не будет поиска по массиву на каждое добавление комментария.