2

I am rendering a component multiple times, and each time I pass a different userId:

  render() {
    const { userId } = this.props;
    return (
      <div>
        <div id={userId} />
        <UncontrolledTooltip target={userId}>tooltip</UncontrolledTooltip>
      </div>
    );
  }

However, I keep getting this error:

SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '5f54e5d61ec2c635f81f0e68' is not a valid selector.

Any idea what's going on?

AG_HIHI
  • 1,705
  • 5
  • 27
  • 69
  • 1
    Does this answer your question? [Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document'](https://stackoverflow.com/questions/37270787/uncaught-syntaxerror-failed-to-execute-queryselector-on-document) – 5eb May 29 '21 at 15:48
  • 4
    From the error message you seem to have `userId` set to a value starting with a digit. The uncontrolled tooltip apparently uses `document.querySelectorAll` under the hood which takes a css selector which can't start with a digit. – 5eb May 29 '21 at 15:50
  • @BasvanderLinden That solved my problem indeed. Thank you. – AG_HIHI May 30 '21 at 07:01

0 Answers0