);
}
diff --git a/src/components/MDX/Link.tsx b/src/components/MDX/Link.tsx
index 8986d07a5..7bf041e56 100644
--- a/src/components/MDX/Link.tsx
+++ b/src/components/MDX/Link.tsx
@@ -13,7 +13,7 @@ function Link({
className,
children,
...props
-}: JSX.IntrinsicElements['a']) {
+}: React.AnchorHTMLAttributes) {
const classes =
'inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal';
const modifiedChildren = Children.toArray(children).map((child: any) => {
@@ -41,11 +41,8 @@ function Link({
{modifiedChildren}
) : (
-
- {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
-
- {modifiedChildren}
-
+
+ {modifiedChildren}
)}
diff --git a/src/components/MDX/Sandpack/DownloadButton.tsx b/src/components/MDX/Sandpack/DownloadButton.tsx
index 4181dbe95..4d206fff8 100644
--- a/src/components/MDX/Sandpack/DownloadButton.tsx
+++ b/src/components/MDX/Sandpack/DownloadButton.tsx
@@ -7,19 +7,22 @@ import {useSandpack} from '@codesandbox/sandpack-react';
import {IconDownload} from '../../Icon/IconDownload';
export interface DownloadButtonProps {}
-let supportsImportMap: boolean | void;
+let supportsImportMap = false;
+
+function subscribe(cb: () => void) {
+ // This shouldn't actually need to update, but this works around
+ // https://github.com/facebook/react/issues/26095
+ let timeout = setTimeout(() => {
+ supportsImportMap =
+ (HTMLScriptElement as any).supports &&
+ (HTMLScriptElement as any).supports('importmap');
+ cb();
+ }, 0);
+ return () => clearTimeout(timeout);
+}
function useSupportsImportMap() {
- function subscribe() {
- // It never updates.
- return () => {};
- }
function getCurrentValue() {
- if (supportsImportMap === undefined) {
- supportsImportMap =
- (HTMLScriptElement as any).supports &&
- (HTMLScriptElement as any).supports('importmap');
- }
return supportsImportMap;
}
function getServerSnapshot() {
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 0e8f84f0d..2a9743ec3 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -22,11 +22,7 @@ export interface SearchProps {
}
function Hit({hit, children}: any) {
- return (
-
- {children}
-
- );
+ return {children};
}
// Copy-pasted from @docsearch/react to avoid importing the whole bundle.
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index b5c193763..3e91a7694 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -31,7 +31,7 @@ Then, use it to declare a ref inside your component:
const myRef = useRef(null);
```
-Finally, pass it to the DOM node as the `ref` attribute:
+Finally, pass your ref as the `ref` attribute to the JSX tag for which you want to get the DOM node:
```js
diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 782b6c0f1..4450c4613 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -313,6 +313,12 @@ button { margin-right: 10px; }
Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toolbar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later.
+
+
+
+Make sure that you use the appropriate HTML tags for your event handlers. For example, to handle clicks, use [`