React component isn't updated in Cobalt on component's state change

Question

I'm creating a small application for Cobalt using React. Everything looks good for now except of one thing: I can't make rerendered small piece of HTML on component's state change. I have a menu on the left and related component/HTML on the right side of a screen. When I change option in the menu I want the right component/HTML to be updated accordingly. Imagine I have 7 menu options. For all of them, except of 5th one, I want to just show the option text. Code in render method looks like:

this.state.selectedOption === 'fifthOption'
            ? <FifthComponent />
            : (
              <div className="wrapper">
                  <span className="title">{this.state.selectedOption}</span>
              </div>)

In Chrome everything works perfect, but in Cobalt by some reason when I switch from 1st to second, third, fourth option - nothing changed and text of the first option is displayed. But it's changed when I switch from 5th option to 4th or 6th. No errors in console. So looks like it doesn't rerender "wrapper" on state change (but render method is launched).

I tried to add different classes to the 'div', make it as a 'switch' construction, make this 'div' as a separate component - all with no luck.

Any help would be really appreciated.

Cobalt doesn't officially support React yet and given the constrained nature of the devices Cobalt runs on, Cobalt team does not endorse any of the frameworks as they tend to run large amounts of JavaScript. That said, some people were successful in running Angular 1 apps on Cobalt. — mmotorny, Oct 29 '17 at 17:38
@mmotorny, I know that, but might be you have any ideas why this issue may happen, as far everything else work perfect. Might be the root of the issue is in the Cobalt's render algorithm, like it doesn't update node if it's class wasn't changed or something like that. — Evgeniy, Oct 29 '17 at 17:57
@mmotorny, another, might be stupid question: I thought that anyway code written in any framework compiled to pure javascript and after that run in browser (or any other environment). I never heard that particular browser doesn't support some frameworks. So Cobalt shouldn't matter how code was written, as far it's pure JS at the end. Where is my mistake? — Evgeniy, Oct 29 '17 at 18:03
There is a difference between ECMAScript 2015 and Web APIs. While Cobalt has a conformant JavaScript engine, rest of Cobalt was designed to support an opinionated subset of Web APIs such as DOM, CSSOM, etc (http://cobalt.foo/development/reference/supported-features.html). Frameworks such as React were debugged against desktop browsers which support a much larger set of Web APIs. Note that none of the frameworks will work on all browsers, for example see https://reactjs.org/blog/2016/01/12/discontinuing-ie8-support.html. — mmotorny, Oct 29 '17 at 22:48
As for help with the original question, Cobalt team typically asks web developers to provide a small, self-contained (not linking entire framework) example of broken code. Sadly, we are not React experts and won't quickly know which unsupported Web API React is trying to use. — mmotorny, Oct 29 '17 at 22:53
@Evgeniy, do you get any error logs with devel build? It might be a good starting point. — Daniel Juyung Seo, Oct 30 '17 at 07:26

Evgeniy · Answer 1 · 2017-10-30T20:20:57.233

It's more a dirty hack, then a real answer, but I resolved the issue by changing element's tag. So code of the render method looks like:

switch (this.state.selectedOption) {
  case 'fifthOption':
    return <FifthComponent />;
   /*use span instead of div in every odd option,
     so they mixed up "span - div - span - div" and so on*/
  case 'firstOption': // 
  case 'thirdOption':
    return (
      <span className="wrapper">
        <span className="title">{this.state.selectedOption}</span>
      </span>);
  default:
    return (
      <div className="wrapper">
        <span className="title">{this.state.selectedOption}</span>
      </div>);
}

So, each next item differs from the previous one by element's tag. Probably, only when Cobalt see new tag it re-renders element.

Evgeniy, could you please file a bug at https://issuetracker.google.com/issues/new?component=181120&template=699202 and include as much data to reproduce the issue as you can, for example, the resulting HTML produced by React? — mmotorny, Oct 31 '17 at 21:43

React component isn't updated in Cobalt on component's state change

1 Answers1