Adding Additional Logic to a Redux Application

In this lesson we will add the final component to our application. More specifically, we will add a reaction to the product from the user who either ordered it or read information about it.

Let's open our product app. As with the seller name, we need to show user reactions in several places in the app. This means we'll need a separate component. So let's start by creating a file called UserReactions.jsx in the products folder. Let's first write an object in it that will contain our reactions:

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

And below we will start writing the function itself, into which we will pass the slice product:

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

Now we will write the body of the UserReactions function in curly brackets. To do this, we will iterate over the key-value pairs of our reactionObj using map, for each we will get a designation for the button ('+', '+/-' or '-') and the numerical value of a particular reaction (we will pull it out from product in the store by the reaction name):

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

And after that, at the end of the function code, we return the layout with the buttons userReactions:

return <div>{userReactions}</div>

And let's also add some more styles to index.css:

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

If this seems a bit confusing, don't worry, it will all become much clearer later.

Open your application with students. In your application, you will have the ability for users to choose a class monitor and a sports team captain among students. So, after studying the lesson materials, create a file UserVotes.jsx in the students folder. At the beginning of the file, create an object votesObj, in which you will have two properties - leader and captain, with the values GL and TC, as a label for the buttons.

Below in the file, after defining the object votesObj, write the code for the function UserVotes, similar to the material from this lesson.