'Some instances of a ReactJS component won't update

I'm developing a VOD app for TV and I'm having an issue with updating an element inside of a slide component. Basically, when a costumer focuses on any of the slides, it calls on a method that stores it's ID on state and then, one of their children checks if the stored state equals the selected item state and if so, it renders. On focusout, it sets the state to null. The weird thing is in most instances of the component this works, but some of them (and always the same instances) won't update.

PSEUDOCODE:

handleFocus(id){setFocused(id)} // Sets the id to state
handlefocusout(){setFocused(null)} // resets state
{isFocused === item.id && <div/>} // checks if state === id and renders

Me and my TL are at a loss as of why it won't work on some of the instances, and unless I'm mistaken, it's always on the same ones. Mind you, the instances' content come all from the same JSON response and are all the same in content (hence instance).



Solution 1:[1]

I never found out why the EventListener wouldn't trigger properly, but I finally removed it and added React's event handlers to the element and it started working.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Martin Scola