Как исправить ошибку?

Question

[Владимир]

Доброе утро. Хочу установить отдельное состояние для каждого элемента, решил добавить им свойство показа. Элементы хранятся в состоянии [items, setItems]. Получаю ошибку при следующем коде:

items.map(el => setItems(items.map(item => item === el ? item.show = !item.show : item)))

Ошибка:

react-dom.development.js:327 Uncaught TypeError: Cannot create property 'show' on boolean 'true'

Благодарю.

Comments

[Вадим]

Вы в курсе что Вы в коде с помощью функции трансформации массива вызываете обновление стэйта?
Так не делается.

И зачем Вам цикл в цикле так ещё и трансформирующий одни и те же элементы?
Так Вы ещё и возвращаете либо результат присваивания, либо элемент во вложенном цикле.

item => item === el ? item.show = !item.show : item // возвращает либо boolean, либо item. В результате если бы всё отработало, у вас бы все элементы превратились в true или false

Покажите что у Вас в items и чего вы хотите добиться.

[Kovalsky]

Вадим, последнее "вы" не с большой буквы, какой вы хам

[Вадим]

Kovalsky, там ещё и в комменте косякнул..

Answer 1

[Александр]

const handle = el => {
	setItems(items => items.map(item => item === el
		? {
			...item,
			show: !item.show
		}
		: item
	));
};

Comments

[Владимир]

Спасибо! Я руководствовался логикой без переписи элемента, но так проще даже.

[Владимир]

Кстати, зачем скобочки? Без них тоже всё работает, или это для функции?

({
      ...item,
      show: !item.show
    })

[Александр]

Владимир, Действительно, можно в данном случае убрать их.

[Владимир]

Александр, а в каких ситуациях юзать такую конструкцию?

[Александр]

Владимир, Когда хотите вернуть объект из стрелочной функции. Например так:

const toError = (message) => ({
  code: 'error',
  message
});

const toInfo = (message) => ({
  code: 'info',
  message
});

toError('Hello'); // { code: 'error', message: 'Hello' }
toInfo('World'); // { code: 'info', message: 'World' }

[Владимир]

Александр, принял, это юзал уже, вспомнил, сенкью