title: How can I update my reactions when I click any icon
body: <p>I have a component I am managing the states using redux and accessing the array data for the component from redux store using a new map. I need to be able to get my icon's value to increment when clicked. I am not sure how to get access to the values of my reactions to make this work and handle my click event with <code>handleReactions</code></p>
  
  <p>constants.js</p>
  
  <pre><code>/** @constant */
  export const INITIAL_STATE = {
      uploads: new Map(),
  };
  
  export const USER_UPLOADS = [
      {
          _id: 0,      
          image: 'http://sugarweddings.com/files/styles/width-640/public/1.%20The%20Full%20Ankara%20Ball%20Wedding%20Gown%20@therealrhonkefella.PNG',
          reactions: {
              dislike: 0,
              like: 0,
              maybe: 0,
          },
          story: "It's my birthday next week! What do you think?",
          user: 'Chioma',
      },
      {
          _id: 1,        
          image: 'https://dailymedia.com.ng/wp-content/uploads/2018/10/7915550_img20181007141132_jpeg01c125e1588ffeee95a6f121c35cd378-1.jpg',
          reactions: {
              dislike: 0,
              like: 0,
              maybe: 0,
          },
          story: 'Going for an event. Do you like my outfit?',
          user: 'Simpcy',
      },
      {
          _id: 2,        
          image: 'https://i0.wp.com/www.od9jastyles.com/wp-content/uploads/2018/01/ankara-styles-ankara-styles-gown-ankara-tops-ankara-gowns-ankara-styles-pictures-latest-ankara-style-2018-latest-ankara-styles-ankara-ankara-styles.png?fit=437%2C544&amp;ssl=1',
          reactions: {
              dislike: 0,
              like: 0,
              maybe: 0,
          },
          story: 'Saturdays are for weddings. Yay or nay?',
          user: 'Angela',
      },
  ];
  </code></pre>
  
  <p>actions.js</p>
  
  <pre><code>import { UPDATE_REACTION, REQUEST_UPLOAD_LIST } from './actionTypes';
  
  /**
   * Triggers request to react on a post
   *
   * @function
   * @return {Object} The {@link actionTypes.REQUEST_UPLOAD_LIST REQUEST_UPLOAD_LIST}
   * action.
   */
  export function updateReaction(itemid, reaction) {
      return {
          itemid,
          reaction,
          type: UPDATE_REACTION,
      };
  }
  
  /**
   * Triggers request for the lists of uploads
   *
   * @function
   * @return {Object} The {@link actionTypes.REQUEST_UPLOAD_LIST REQUEST_UPLOAD_LIST}
   * action.
   */
  export const requestUploadList = payload =&gt; ({
      payload,
      type: REQUEST_UPLOAD_LIST,
  });
  </code></pre>
  
  <p>reducers.js</p>
  
  <pre><code>import { UPDATE_REACTION, REQUEST_UPLOAD_LIST } from './actionTypes';
  import { INITIAL_STATE, USER_UPLOADS } from './constants';
  
  /**
   * Creates a Javascript Map with the user uploads mapped by id
   *
   * @param {Array} USER_UPLOADS - a users uploads
   * @return {Map} - the user uploads
   */
  
  function generateUploadsMap() {
      const setOfUserUploads = new Map();
  
      USER_UPLOADS.forEach(userUpload =&gt; {
          const { _id } = userUpload;
  
          setOfUserUploads.set(_id, userUpload);
      });
  
      return setOfUserUploads;
  }
  
  function updateItemReactions(itemid, reaction, uploads) {
      const upload = uploads.get(itemid);
      upload.reactions = {
          ...upload.reactions,
          [reaction]: upload.reactions[reaction] + 1,
      };
      uploads.set(itemid, upload);
      return uploads;
  }
  
  console.log(updateItemReactions());
  export default (state = { ...INITIAL_STATE }, action) =&gt; {
      switch (action.type) {
          case REQUEST_UPLOAD_LIST: {
              return {
                  ...state,
                  uploads: generateUploadsMap(),
              };
          }
          case UPDATE_REACTION: {
              const { uploads } = state;
  
              return {
                  ...state,
                  uploads: updateItemReactions(action.itemid, action.reaction, uploads),
              };
          }
  
          default:
              return state;
      }
  };
  
  
  </code></pre>
  
  <p>home.js</p>
  
  <pre><code>import PropTypes from 'prop-types';
  import React from 'react';
  import { Avatar, Card, Icon, List } from 'antd';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  
  import { LIST_TEXTS, STYLES } from '../constants';
  import * as actions from '../actions';
  import { getUploads } from '../selectors';
  
  const { AVATAR, CARD_CONTAINER, CARD_LIST, ICON, USER_LIST } = STYLES;
  const { INNER, MORE, UPLOAD, VERTICAL } = LIST_TEXTS;
  
  const IconText = ({ type, text }) =&gt; (
      &lt;span&gt;
          &lt;Icon type={type} style={ICON} /&gt;
          {text}
      &lt;/span&gt;
  );
  function createReactionsIcon(item, updateReaction) {
      const { like, dislike, maybe } = item.reactions;
      const icons = [
          { reaction: 'like', text: `${like}`, type: 'heart' },
          { reaction: 'dislike', text: `${dislike}`, type: 'dislike' },
          { reaction: 'maybe', text: `${maybe}`, type: 'meh' },
      ];
      return icons.map(({ reaction, text, type }) =&gt; (
          &lt;IconText
            onClick={updateReaction(item._id, reaction)}
            key={reaction}
            type={type}
            text={text}
          /&gt;
      ));
  }
  
  class Home extends React.Component {
      componentDidMount() {
          const { requestUploadList } = this.props.actions;
  
          requestUploadList();
  
      }
  
          updateReaction = (itemid, reaction) =&gt; {
          const { updateReaction } = this.props.actions;
          updateReaction(itemid, reaction);
      }
  
      render() {
          const { uploads } = this.props;
          const values = Array.from(uploads.values());
  
          return (
              &lt;div style={CARD_CONTAINER}&gt;
                  &lt;List
                    itemLayout={VERTICAL}
                    dataSource={values}
                    renderItem={item =&gt; (
                        &lt;List.Item style={USER_LIST}&gt;
                            &lt;Card
                              actions={createReactionsIcon(item, this.updateReaction)}
                              cover={&lt;img alt={UPLOAD} src={item.image} /&gt;}
                              extra={&lt;Icon type={MORE} /&gt;}
                              hoverable
                              title={(
                                  &lt;a href="/"&gt;
                                      &lt;Avatar src={item.image} style={AVATAR} /&gt;
                                      {item.user}
                                  &lt;/a&gt;
                              )}
                              type={INNER}
                              style={CARD_LIST}
                            &gt;
                                {item.story}
                            &lt;/Card&gt;
                        &lt;/List.Item&gt;
                    )}
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  Home.propTypes = {
      uploads: PropTypes.instanceOf(Map),
      actions: PropTypes.object,
  };
  
  const mapStateToProps = state =&gt; ({
      uploads: getUploads(state),
  });
  
  const mapDispatchToProps = dispatch =&gt; ({
      actions: bindActionCreators(actions, dispatch),
  });
  
  export default connect(mapStateToProps, mapDispatchToProps)(Home);
  </code></pre>