How to handle dynamic IDs in examples

[oieduardorabelo]

hey guys! :)

i've a few components that generates dynamic internal ids for their children, like:

import shortid from 'shortid';

class Field extends React.Component {
  constructor() {
    this.instanceId = shortid.generate();
  }

  render() {
    return (
      <p>
        <label htmlFor={this.instanceId}>Example<label>
        <input id={this.instanceId} />
      <p>
    )
  } 
}

Every time I start the style guide, I've a few red bars diffing only the ID.

Without moving it to a prop, there's any solution for this issue?

(I'm not worried about it tbh, just asking :P)

[MicheleBertoli]

Hello @oieduardorabelo, thanks for your question.
Snapshots fail with pseudo-random values or values that change overtime and, apart from mocking the source of randomness, there is no solution.
In this case, as you said, the only way is passing the shortid generator as prop.