title: How to link a text input with associated error message in a reusable React component
body: <p>I have a React component called <code>TextInput</code> which looks like this:</p>
  <pre><code>const TextInput = React.forwardRef&lt;HTMLInputElement, ITextInputProps&gt;(
    ({ error, ...props }, ref) =&gt; {
      return (
          &lt;&gt;
              &lt;input
                  type=&quot;text&quot; 
                  aria-describedby=&quot;&quot; //  see here
                  ref={ref}
                  {...props}
              /&gt;
              {error &amp;&amp; (
                  &lt;p&gt; //  how can I reference this?
                      {error}
                  &lt;/p&gt;
              )}
          &lt;/&gt;
      )}
  )
  </code></pre>
  <p>For accessibility, I am trying to link the error message to the field using <code>aria-describedby</code>.</p>
  <p>In a normal HTML document I would just use the <code>id</code> of the paragraph tag, but with reusability in mind, I would like to learn how to do this in a React-like way.</p>
  <p>The use of refs comes to mind, but I'm not sure how to apply it in this scenario.</p>