Sendbird - how update message after 'reaction click'?

Question

We use Sendbird for chat. I have message component with buttons that run addReaction method enter image description here. And according to the docs https://sendbird.com/docs/chat/v3/javascript/guides/group-channel#2-react-to-a-message 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

enter image description here

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 actually wrong.

Answer 1

The problem was in updates react components. So I solved it by updating message component after reaction click using then(). Small explanation to code - for addReaction event I have setState that close 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());
}
};