How to update message after reaction click?

Screenshot_77
Hello. I have message component with buttons that run addReaction method (screen 1). And according to the docs Group channel | Chat JavaScript SDK | Sendbird Docs I need to do message.applyReactionEvent(reactionEvent) but it applies not ‘in live’.

In main Chat component I added onReactionUpdated and it runs after reaction click:

channelHandler.onReactionUpdated = function (channel, reactionEvent) {
        console.log('reactionEvent', reactionEvent);
 };

But reaction reveals only if I reload page or close dialog and open again (in general, after update of whole dialog). I guess that there are mistakes in my code but can’t figure out what is actually wrong.

Hi @maksymV welcome to the Sendbird community!

This might as well be related to React not re-rendering your reactions counter to display new information. Can you please share more of your code and specifically where you are rendering the reactions?

Yes, you were right. Thanks for the answer. I solved the problem by updating the message component after the reaction click using then(). If someone will ever face this problem I provide my code here because when I tried to google this problem I’ve found nothing. Small explanation to code - for addReaction event I have setState that closes pop-up with emojis and updates my component. For deleteReaction I don’t have any function that would fit there so I decided to use kind of forceUpdate from React docs:

const [_, forceUpdate] = useReducer(x => x + 1, 0); 

And my function:

const toggleReaction = (type, emojiKey) => {
    if (type === 'add') {
      channel
        .addReaction(message, emojiKey, function (reactionEvent, error) {
          if (error) {
            console.log(error);
            return setShowEmojis(false);
          }
          message.applyReactionEvent(reactionEvent);
        })
        .then(() => setShowEmojis(false));
    }
    if (type === 'delete') {
      channel
        .deleteReaction(message, emojiKey, function (reactionEvent, error) {
          message.applyReactionEvent(reactionEvent);
        })
        .then(() => forceUpdate());
    }
  };

Hope it’ll help someone in the future.

1 Like