Doesn't work across different classes

[developher-net]

This is similar to #1, but works in a single DOM render and doesn't require streaming.

Because the iterator is trapped within the scope of the specific class, it doesn't populate across components, so isn't safe to use for globally unique IDs on a page.

fooA.js

import React from 'react';
import nextId from 'react-id-generator';
export default class FooA extends ReactComponent {
  id = nextId();
  render() {
    render(
      <div id={id} />
    )
  )
}

fooB.js

import React from 'react';
import fooA from './fooA';
export class FooB extends React.Component {
  render() {
    return(
      <React.Fragment>
        <FooA />
      </React.Fragment>
  }
}

fooC.js

import React from 'react';
import nextId from 'react-id-generator';
export class FooC extends React.Component {
 id = nextId();
  render() {
    render(
      <a id={id} />
    )
  )
}

template.js

import FooB from './fooB';
import FooC from './fooC';
<FooB something={'something'}/>
<FooB something={'something else'}/>
<FooC />

Expected Result

<div id="id1"></div>
<div id="id2"></div>
<a id="id3"></a>

Actual Result

<div id="id1"></div>
<div id="id2"></div>
<a id="id1"></a>

[Tomekmularczyk]

hey @amclin and thanks for contributing! Could you reproduce this bug on code sandbox? I already tried with your example here but no success.