From 87d8bd319167d80202b04c259093c69f67c65c9e Mon Sep 17 00:00:00 2001
From: Evan Jacobs <x@quantizor.dev>
Date: Tue, 12 Nov 2024 23:22:11 -0500
Subject: [PATCH] fix: map class -> className

Fixes #606
---
 .changeset/chatty-waves-invite.md |  5 +++++
 index.compiler.spec.tsx           | 12 ++++++++++--
 index.tsx                         |  3 +--
 3 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/chatty-waves-invite.md

diff --git a/.changeset/chatty-waves-invite.md b/.changeset/chatty-waves-invite.md
new file mode 100644
index 00000000..62d60dca
--- /dev/null
+++ b/.changeset/chatty-waves-invite.md
@@ -0,0 +1,5 @@
+---
+'markdown-to-jsx': patch
+---
+
+Handle `class` attribute from arbitrary HTML properly to avoid React warnings.
diff --git a/index.compiler.spec.tsx b/index.compiler.spec.tsx
index 04429c6f..dc70e9ba 100644
--- a/index.compiler.spec.tsx
+++ b/index.compiler.spec.tsx
@@ -2460,10 +2460,18 @@ describe('GFM tables', () => {
 
 describe('arbitrary HTML', () => {
   it('preserves the HTML given', () => {
-    render(compiler('<dd>Hello</dd>'))
+    const ast = compiler('<dd class="foo">Hello</dd>')
+    expect(ast).toMatchInlineSnapshot(`
+      <dd
+        className="foo"
+      >
+        Hello
+      </dd>
+    `)
 
+    render(ast)
     expect(root.innerHTML).toMatchInlineSnapshot(`
-      <dd>
+      <dd class="foo">
         Hello
       </dd>
     `)
diff --git a/index.tsx b/index.tsx
index 129df3f1..f75f5394 100644
--- a/index.tsx
+++ b/index.tsx
@@ -89,7 +89,6 @@ const ATTRIBUTE_TO_JSX_PROP_MAP = [
   'cellPadding',
   'cellSpacing',
   'charSet',
-  'className',
   'classId',
   'colSpan',
   'contentEditable',
@@ -126,7 +125,7 @@ const ATTRIBUTE_TO_JSX_PROP_MAP = [
     obj[x.toLowerCase()] = x
     return obj
   },
-  { for: 'htmlFor' }
+  { class: 'className', for: 'htmlFor' }
 )
 
 const namedCodesToUnicode = {