# Добавление дополнительной логики в Redux приложение

На этом занятии мы добавим последний компонент к нашему приложению. Если быть конкретнее, то мы будем добавлять к продукту реакцию пользователя, который его либо заказывал, либо прочитал о нем информацию.

Давайте откроем наше приложение с продуктами. Как и в случае с названием продавца, нам нужно показать реакцию пользователей в нескольких местах приложения. А это значит, что нам потребуется отдельный компонент. Поэтому начнем с того, что в папке `products` создадим файл `UserReactions.jsx`. Давайте для начала пропишем в нем объект, в котором будут наши реакции:

`const reactionObj = { good: '+', soso: '+/-', bad: '-', }`

А ниже начнем писать саму функцию, в которую будем передавать слайс `product`:

`export const UserReactions = ({ product }) => {}`

Теперь в фигурных скобочках напишем тело функции `UserReactions`. Для этого переберем с помощью `map` пары ключ-значение нашего `reactionObj`, для каждой получим обозначение для кнопочки (`'+'`, `'+/-'` или `'-'`) и численное значение той или иной реакции (его мы будем вытягивать из `product` в store по названию реакции):

`const userReactions = Object.entries(reactionObj).map(([name, image]) => { return ( <button key={name} type="button" className="reaction-button"> {image} {product.reactions[name]} </button> ) })`

И после этого в конце кода функции вернем верстку с кнопочками `userReactions`:

`return <div>{userReactions}</div>`

А также добавим еще немного стилей в `index.css`:

`.reaction-button { margin-right: 10px; margin-bottom: 10px; }`

Если это выглядит несколько запутанным, не переживайте, далее вам станет все намного понятнее.

Откройте ваше приложение со студентами. В вашем приложении будет возможность для пользователей выбрать среди студентов старосту группы и капитана спортивной команды. Поэтому, изучив материалы урока, создайте в папке `students` файл `UserVotes.jsx`. В начале файла создайте объект `votesObj`, в котором у вас будет два свойства - `leader` и `captain`, со значениями `GL` и `TC`, в качестве обозначения для кнопок.

Ниже в файле после определения объекта `votesObj` напишите код функции `UserVotes`, по аналогии с материалом из данного урока.

← →
↑